Myujth

This is my HTML:

<ul id="menu-mobile" class="menu menu-sliding">
 <li>
 <a href="javascript:void(0);">Home</a></span>
 </li>
 <li class="has-children">
 <a href="javascript:void(0);">IT Solutions</a>
 <span class="menu-item-toggle"><span></span></span>
 <ul class="sub-menu">
 <li class="has-children">
 <a href="javascript:void(0);">IT Services</a>
 <span class="menu-item-toggle"><span></span></span>
 <ul class="sub-menu">
 <li><a href="javascript:void(0);">Managed IT</a></li>
 <li><a href="javascript:void(0);">IT Support</a></li>
 <li><a href="javascript:void(0);">IT Consultancy</a></li>
 <li><a href="javascript:void(0);">Cloud Computing</a></li>
 <li><a href="javascript:void(0);">Cyber Security</a></li>
 <li><a href="javascript:void(0);">Custom Software</a></li>
 </ul>
 </li>
 <li class="has-children">
 <a href="">Industries</a>
 <span class="menu-item-toggle"><span></span></span>
 <ul class="sub-menu">
 <li><a href="javascript:void(0);">Banking</a></li>
 <li><a href="javascript:void(0);">Capital Markets</a></li>
 <li><a href="javascript:void(0);">Enterprise Technology</a></li>
 <li><a href="javascript:void(0);">Manufacturing</a></li>
 <li><a href="javascript:void(0);">Healthcare</a></li>
 <li><a href="javascript:void(0);">Higher Education</a></li>
 <li><a href="javascript:void(0);">Logistics</a></li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

This is my script:

$('ul.menu li.has-children').on('click', function () 
 $(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
);

This is how it looks:

Now the problem is whenever I am clicking the nested li's i.e. It Services / Industries .menu-expand class gets removed from the parent i.e. It Solutions and the whole block goes in display:none state.

How to fix this?

I guess you can change the key to use it properly and cover it only for first level li's like this:

$('ul.menu li.has-children a').on('click', function () 
 $(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);

To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.

Hope this helps.