JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<ul>      
 <li class="menuContainer">
  <a class="top" href="#">Menu</a>   
  <div class="sub"> 
    <a class="top" href="google.com">item in dropdown menu with valid   url when clicked here div.sub should stay close</a>
 </div>
</li>
 <li class="menuContainer">
   <a class="top" href="#">Menu</a>   
    <div class="sub"> 
     <a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
   </div>
</li>  
</ul>

CSS

.sub{
  display: none;
}

JavaScript

$(document).ready(function(){
  $("li.menuContainer > a.top").click(function(e) {
    e.preventDefault();
    $div = $(this).next("div.sub");
    $("li.menuContainer div.sub").not($div).slideUp();
    $div.slideDown();
  });
  $(window).on('click',function(e){
     if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
        && $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
    {
       $("li.menuContainer div.sub").slideUp();
    }
  });
  
  $("div.sub > a.top").on('click',function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert('Here We Are :)');
  });
});