JSFiddle - React, Tailwind, and code Playground

by smileart

HTML

<div>
    <a href="#" id="show_list">Show list</a>
    <select id="lst">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</div>

CSS

#lst
{
    display: none;
}

JavaScript

$("#show_list").click(function() {
    $("#lst").show();
});

$(":not(select)").click(function() {
    if ($(this).attr("id") != "show_list") {
        
        // HIDE alerted three times because of ":not(select)"
        // click  event triggered for div, html and body when
        // we click on link
        alert("HIDE");
        
        // When list is shown by #show_list click, it's will be
        // hidden by three other click events
        $("select").hide();
    }
});