Question

我在使用jQuery显示和隐藏菜单时遇到了一些问题。我想做的是：

如果按下某个按钮，则显示菜单div。如果单击除div之外的某处，则隐藏菜单div。

这里是我的问题所在。上面的工作非常完美，但当你点击div内部的元素时，菜单会被隐藏，这不是我想要的结果。我的代码如下：

$(document).ready(function() {
    $(document).click(function(e) {
        if (e.target.id != "projectEdit") {
            if (e.target.id != "projectEditMenu") {
                $("#projectEditMenu").hide();
            }
        } else {
            $("#projectEditMenu").show();
        }
    });
});

如何才能使菜单div的子项被排除在此参数之外，如果单击子项，它会使菜单保持打开状态？

HTML code：

    <div id="projectEditMenu">

        <div id="projectEditMenuMarker"></div>

        <div id="projectEditMenuAddTile">

            <span id="projectEditMenuAddTileTitle">Add Tile</span>

            <form id="newTileForm" action="openProject.php" method="put" hidden></form>

            <input form="newTileForm" type="text" name="newTileName" id="newTileNameInput" placeholder="Tile Name">

        </div>

    </div>

Answer 1

你可以使用closest()，其中包括作为参数传递的选择器的后代和元素本身

示例：

$(document).click(function (e) {
     var $tgt = $(e.target);
    if ($tgt.closest("#projectEdit").length) {
        alert('I am part of "#projectEdit"');
    }   

});

<强> closest() API Docs

Answer 2

试试这个：

var textArea = $('#textarea');

textArea.click(function() {

    textArea.addClass('selected');

});

$('body').click(function(e){

    if( textArea.is('.selected') &&
        !$(e.target).is(textArea)){

        textArea.removeClass('selected');

    }

});

Answer 3

另一种解决方案

$(document).ready(function() {
    var in_menu = false;
    $('#projectEdit').click(function() {
        in_menu = false;
        $("#projectEditMenu").show();
        $('#projectEditMenu').hover(function() {
            in_menu = true;
        }, function() { 
            in_menu = false;
        });
        $('html').click(function() {
            if( !in_menu ) { 
                $("#projectEditMenu").hide();
                //delete all events
                $('#projectEditMenu').unbind();
                $('html').unbind('click');
            }
        });
    });
});

如果使用jQuery单击目标本身或其子项，则隐藏元素

3 个答案: