在点击,导航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(){
	
  if( $(".menu li").hasClass("visible") ){
   $(".menu li").removeClass("visible");
  
  	    };
  });

接下来要做的是:

• 当我点击.menu li添加课程active
• 当我单击另一个.menu li项目或打开时.submenu li a,active从li具有该类的另一个项目中删除该类
• 而且,当我点击其他任何地方(示例正文)时,也从中删除类 .menu li

我希望你明白我想要的.抱歉我的语法不好

更新:

切换解决方案

修改后的代码:@Sasa Novakovic(再次感谢兄弟:))

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');
}