主页 / 问题 / 612218
Accepted
Drakulitka
Asked:2020-01-08 22:16:40 +0000 UTC2020-01-08 22:16:40 +0000 UTC

如何防止菜单栏被标签隐藏

  • 772

我有一个 bootstrap(3.3.7) 页面，其中包含一个包含选项卡和链接的下拉菜单。此时，菜单在悬停时打开，选项卡起作用。

沙盒

如果您在沙箱中删除此 JS 脚本：

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});

然后下拉菜单在单击时打开，但也会在下一次单击选项卡或其他菜单元素及其外部时关闭。

如果留下JS代码，菜单悬停时打开，点击选项卡（tabs）时不隐藏。

如何使菜单在单击时显示，同时防止菜单在选项卡和空下拉菜单上关闭？

javascript

1 个回答

  1. Best Answer

    显然，最简单的方法是将负责打开的代码从移动hover()到click()：

    $(document).ready(function(){
  $(".dropdown").click(   
   function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).addClass('open');        
        }
    )

    $(".dropdown").hover(            
        function() { },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).removeClass('open');       
        }
    );
});

    同时，替换toggleClass()为addClass()andremoveClass()

    • 0

相关问题