在点击，导航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');
}

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

.addclass{
    background-color:red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试将此代码段添加到HTML中：

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