Question

I create a menu using UL element, I am using jQueryUI to show this menu.

<ul style="display:none" id="action_menu" class="menu">
    <li><a href="javascript:alert(213112);">Edit Translation</a></li>
    <li><a href="javascript:void(0);">Edit Comment</a></li>
    <li><a href="javascript:void(0);">Edit Bind</a></li>
    <li><a href="javascript:void(0);">Edit Reuse</a></li>
    <li><a href="javascript:void(0);">Edit Sync Up</a></li>
    <li><a href="javascript:void(0);">Export</a></li>
    <li><a href="javascript:void(0);">Show History</a></li>
    <li><a href="javascript:void(0);">Upload Screenshot</a></li>
</ul>

When a button is clicked, $(“#action_menu”).menu() can show this menu.
and I know how to show this menu, and now I have no idea how to hide this menu when mouse click on other place not click on the menu. I find so many examples, they add document click listener, and check whether the event target’s parent node is this menu. Like this link Hide dropdown menu jQuery does anyone have better idea, i wondering why jQueryUI doesn’t add an event or option for menu widget. Someone help me, thanks

Answer 1

this is a general solution i don’t know about your plugin

$(document).click(function (e)
{
    var container = $(".menu");

    if (container.has(e.target).length === 0)
    {
        container.hide();
    }
});