JSFiddle - React, Tailwind, and code Playground

by cfmitrah

HTML

<ul id="rightNav">

      <li id="SettingOpt">
        <a href="javascript:void(0)">username<span class="fabShopSprite iRecentIcon iUserIcon"></span></a>
        <div class="userMenu">
          <ul>
            <li><a class="Setting" href="/">Settings</a></li>
            <li><a class="Setting lastShadow" href="/">Logout</a></li>
          </ul>
        </div>
      </li>

    </ul>

CSS

div.userMenu{display:none}

JavaScript

$('body').click(function() {
 $('div.userMenu').hide();
});

$("#SettingOpt a").click(function(event) {
        var parent = $(this).parent();
        parent.toggleClass("selected");
        parent.find("div.userMenu").toggle();
        event.stopPropagation();
   });