Jquery скрыть родительский div при щелчке класса li, если другой li имеет определенный класс

Question

У меня есть родительский DIV, который имеет UL и LI. Только первый LI имеет определенный класс (скажем .closeSuperDept ). Мне нужно скрыть весь DIV (#departmentMenu), если первый LI имеет класс (closeSuperDept) при щелчке остальной части LI (который имеет раскрывающийся список класса).

<div id="#departmentMenu"> 
<ul> 
<li class="closeSuperDept">Heading</li> 
<li class="dropdown-toggle">item1</li> 
<li class="dropdown-toggle">item1</li> 
<li class="dropdown-toggle">item1</li> 
</ul> 
</div> 


$(document).on('click', '#departmentMenu .dropdown-toggle', function(){ 
var $breadcrumb = $("#departmentMenu .dropdown-toggle"); 
if ($breadcrumb.hasClass('closeSuperDept')){ 
$('#departmentMenu').hide(); 
} 
}); 

Я пробовал код выше, я не могу получить ожидаемый результат.

Answer 1

Вы можете попробовать это:

$(document).on('click', '#departmentMenu .dropdown-toggle', function() { 
    var $breadcrumb = $("#departmentMenu li:first"); 
    if ($breadcrumb.hasClass('closeSuperDept')) { 
     $('#departmentMenu').hide(); 
    } 
}); 

• var $breadcrumb = $("#departmentMenu li:first"); получит первый li элемент внутри родительского departmentMenu

Answer 2

Попробуйте это:

<div id="#departmentMenu"> 
<ul> 
<li class="closeSuperDept">Heading</li> 
<li class="dropdown-toggle">item1</li> 
<li class="dropdown-toggle">item1</li> 
<li class="dropdown-toggle">item1</li> 
</ul> 
</div> 


var $menu = $('#departmentMenu').on('click', '.dropdown-toggle', function(){ 
    if ($menu.find('li.closeSuperDept:first-child').length){ 
     $menu.hide(); 
    } 
}); 

Что она делает это следующее: , если вы нажмете кнопку «.dropdown-toggle» внутри «#departmentMenu», сценарий ищет «li» с «.closeSuperDept» внутри меню, которое является первым дочерним элементом внутри его родителя. если он найдет это, меню будет скрыто