CODEWITHSUNDEEP
javascriptjquery
Ramesh
Ramesh

Reputation: 9291

Jquery hide parent div on click of li class if another li has specific class

I have a parent DIV which has UL and LI. Only first LI has some specific class(say .closeSuperDept ). I need to hide the entire DIV(#departmentMenu) if the first LI has class(closeSuperDept) on click of rest of LI's(which has the class "dropdown-toggle").

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

I tried above code, I am not able to get the expected output.

Upvotes: 0

Views: 543

Answers (2)

Yannick Gottschalk
Yannick Gottschalk

Reputation: 93

Try this:

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

What it does is the following: if you click on a '.dropdown-toggle' inside the '#departmentMenu' the script searches for a 'li' with '.closeSuperDept' inside the menu which is the first child inside its parent. if it finds it, the menu will be hidden

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

You can try this:

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

Upvotes: 2

Related Questions