Question

这是较大视图端口上的水平菜单，当您单击下拉列表时，菜单会展开，列表是内联的。附加了一个范围，以显示父级别下条带中的列表。一切正常，除了一件事，因为我的jQuery技能相当糟糕。

问题是如何使用这个jQuery（使用这个jQuery）并且如果.navbar-nav li.dropdown没有.active类，只删除类.menu-open off html。还必须使用现有的东西，这样当用户点击外面时，如果没有类.active等，则删除该类。请参阅下面的Bin链接。

这是我到目前为止的演示：http://jsbin.com/micugu/1/

查看我的意思的最佳方式是访问上面的链接，点击导航栏外的页面，您将看到（如果您的页面足够宽）我正在尝试阻止的行为。

http://jsbin.com/micugu/1/edit

$(document).on('click touchstart', function (a) {      
        if ($(a.target).parents().index($('.navbar-nav')) == -1){
               $('html').removeClass('menu-open');
        }      
});

和此：

$('.dropdown-toggle').click(function () {       
  if (!$(this).parent().hasClass('open')) {      
        $('html').addClass('menu-open');          
  } else {        
     $('html').removeClass('menu-open');      
  }        
});

Answer 1

我希望这就是你要找的东西

Edited --> JSfiddle link

Edited link to full screen result

这是我用来获得结果的代码。

$("li").click(function(e){  
     $("li[class *='active']").each(function(){
     $(this).removeClass('active');    
     });

    if(!$(this).hasClass('dropdown'))
    {
       $('html').removeClass('menu-open');
    }
    $(this).addClass('active');
    if ($(a.target).parents().index($('.navbar-nav')) == -1){
         $('html').removeClass('menu-open');
    }
 });

Answer 2

这是你要找的？ http://jsbin.com/yuloqebe/1/edit?html,js,output

if (!$(".nav-bg").hasClass('active')){
    $('html').removeClass('menu-open');
}

基本上如果hasClass返回false，我们将删除菜单打开类

Answer 3

不确定我有你，你可以尝试这样的事情：

    if(!$('.dropdown.navbar-nav').hasClass('active')){
          $('.menu-open').removeClass('menu-open'); // will remove menu-open  class
        }

如果.dropdown没有.active - jQuery，则删除Class

这是我到目前为止的演示：http://jsbin.com/micugu/1/

3 个答案: