How can I target elements in jQuery that do not contain a specific element within them? I am trying to create a sidebar that will close when the user clicks either the menu or the sidebar itself, excluding dropdown menus. Below is the structure of the menu:
<li><a href="#">Menu Normal</a></li>
<li>
<a href="#">Menu Dropdown</a>
<ul class="sidebar-nav-child">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-1</a></li>
</ul>
</li>
Below is the jQuery code:
$(".sidebar-toggle").click(function(e){
e.preventDefault();
$("#wrapper").addClass('sidebar-show');
$("#sidebar, .sidebar-nav li:not(:has(.sidebar-nav-child)) a").click(function(){
$("#wrapper").removeClass('sidebar-show');
});
});
The issue with my current code is that it still closes the sidebar even if I click on the dropdown menu. Thank you for your help.