How to select elements in jQuery that don't have a specific element in it

Question

How to select elements in jQuery that don't have a specific element in it. I want to make a sidebar which will close after the user either click the menu or the sidebar itself but limited to dropdown menu. Here's the structure code 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>

Here's the jquery:

$(".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');
  });
});

My code above will still close the sidebar even though i click the dropdown. Thank you in advance.

Answer 1

You need to process li that are direct children of .sidebar-nav and don't contain nested ul :

 $("#sidebar, .sidebar-nav > li:not(:has(ul)) a")

But I haven't get clear what role of #sidebar here.