JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<ul>      
 <li class="menuContainer">
 <li class="menuContainer">
      <a class="top" href="#">Menu</a>   
      <div class="sub">dopr down text goes here</div>
  </li>
   <li class="menuContainer">
      <a class="top" href="#">Menu</a>   
      <div class="sub">dopr down text goes here</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();
    }
  });
});