JSFiddle - React, Tailwind, and code Playground

by troythompson

HTML

<li class="has-dropdown">
     <a id="headermile" href="#">Milestones </a>
         <div id="milestoneheader" class="hide">
             <ul class="dropdown settings">
                 <li id="mileheader">something</li>
             </ul>
     </div>
</li>

CSS

.hide{
    display:none;
}

JavaScript

jQuery(document).ready(function($) {

    $('#headermile').click(function(event) {
            event.preventDefault();
            $("#milestoneheader").removeClass("hide");
        });

        $(document).on('click', function(event) {
            var container = $("#milestoneheader");
            var button = $("#headermile");
            if (!container.is(event.target) && container.has(event.target).length === 0 && !button.is(event.target)) {
                $("#milestoneheader").addClass("hide");
            }
        });
    });