点击添加/删除类，导航li项

Question

我试图找到解决方案，但我不能，每一个代码都不适合我的项目。下面是导航结构

<nav> 
 
    <ul class="menu"> 
 
    <li> 
 
     <ul class="submenu"> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul class="submenu"> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     <li><a></a></li> 
 
     </ul> 
 
    </li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</nav>

$(".menu li").click(function(){ 
 
    $(this).toggleClass("visible"); 
 
}); 
 
$('body').click(function(){ 
 
\t 
 
    if($(".menu li").hasClass("visible")){ 
 
    $(".menu li").removeClass("visible"); 
 
    
 
    \t  }; 
 
    });

多么想实现旁边：

• 当我点击.menu li添加类
• ，当我在另一个.menu li项目或.submenu li a单击，从有类
• 而且还另有li项目中删除active类当我点击其他地方（如身体）也从.menu li

删除类

我希望你明白我想要什么。对不起，我的语法错误

更新：

切换解决方案

修改后的代码是：@Sasa诺瓦科维奇（再次感谢你的兄弟:)）

function removeActiveMenuClass(active_element){ 
 
    $('.menu li').not(active_element).removeClass('visible'); 
 
} 
 

 
$('.menu>li').click(function(e) { 
 
    e.stopPropagation(); 
 
    var $_this = $(this); 
 

 
    removeActiveMenuClass($_this); 
 
    if ($_this.hasClass('visible')) { 
 
     $_this.removeClass('visible'); 
 
    } 
 
    else { 
 
     $_this.addClass('visible'); 
 
    } 
 
}); 
 

 
$('body').click(function() { 
 
    removeActiveMenuClass(); 
 
});

Answer 1

这里是你jsfiddle代码。

$('html').click(function() { 
    removeActiveMenuClass(); 
}); 

$('.menu>li, .submenu>li').click(function(e) { 
    e.stopPropagation(); 
    removeActiveMenuClass(); 
    $(this).addClass('active'); 
}); 

function removeActiveMenuClass(){ 
    $('.menu li').removeClass('active'); 
} 

Answer 2

尝试增加这段代码到您的HTML：

<script> 
var options = $('.menu').find('li'); 
options.onclick(function(){ 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 
$('*').not(options).click(function(){$('.active').removeClass('active')}); 
</script> 

Answer 3

$('.submenu li').click(function(){ 
 
    $('.submenu li').removeClass('addclass'); 
 
    $(this).addClass('addclass'); 
 
}) 
 
$(document).mouseup(function(){ 
 
    $('.submenu li').removeClass('addclass'); 
 
})

.addclass{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul class="menu"> 
 
    <li> 
 
     <ul class="submenu"> 
 
     <li><a>submenu1</a></li> 
 
     <li><a>submenu2</a></li> 
 
     <li><a>submenu3</a></li> 
 
     <li><a>submenu4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul class="submenu"> 
 
     <li><a>submenu1</a></li> 
 
     <li><a>submenu2</a></li> 
 
     <li><a>submenu3</a></li> 
 
     <li><a>submenu4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</nav>