добавить/удалить класс по щелчку, навигация li item

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 добавить класс active
• Когда я нажимаю на другой .menu li пункта или на .submenu li a, удалить класс active из другого li элемента, который имеет этот класс
• А также, когда я нажимаю в другом месте (например, тело) также удалить класс из .menu li

Надеюсь, вы понимаете, чего я хочу. Извините за мой плохой грамматики

Update:

Переключить Решение

Модифицированный код по: @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>