Question

我正在尝试创建一个简单的jQuery弹出菜单，但似乎无法找出脚本来检查某个元素是否在预定义的元素中。

单击弹出触发器将启动jQuery函数。该函数保存以下变量：被单击的元素（js_popup-trigger），其主要父元素（js_popup-container）以及带有菜单项的实际菜单（js_popup-menu）。

单击触发器后，菜单会淡入/淡出，并向文档中添加一个事件侦听器，以检查用户是否在菜单之外单击，在这种情况下应将其关闭，如果用户在其中单击。

这是我无法弄清的部分-如何检测用户是在弹出式元素内部还是外部单击了？

我已经尝试过了： if(!$(e.target).parent('.js_popup-container').length){

但是，当页面上有多个弹出窗口时，这将无法正常工作，因为如果单击其他任何位置（包括另一个弹出窗口），则当前窗口应关闭，但是因为如果您单击另一个具有相同js_popup-类的弹出窗口，容器，则它将保持打开状态，因为从技术上讲，它处于该类的元素内。

/*  Popup menu toggle
===========================================*/
$(document).on("click",".js_popup-trigger", function(e){
    e.preventDefault();


    //Set variables
    var element     = $(e.currentTarget),
        container   = element.parent('.js_popup-container'),
        menu        = element.next('.js_popup-menu');


    //Toggle the menu
    menu.fadeToggle(200);


    /*  Create a click listener for the document
    *   This is to close the menu if clicked outside of it */
    $(document).click(function closePopup(e){


        //If the clicked item is not in the popup, close it
        if(!$(e.target).parent(container).length){
            menu.fadeToggle(200);
            $(document).unbind('click',closePopup);
        }
    });
});

最后，我要实现的功能是只需添加3个类就可以将其应用于任何弹出菜单。应该具有在同一页面上具有多个弹出菜单的选项，并且当单击菜单之外的任何位置时，它应该关闭。

我当然愿意提出改进代码的建议，但是我现在不想使用预先存在的插件。

编辑：我知道已经存在其他与此问题非常相似的问题和解决方案，但是不同之处在于，其他问题中给出的解决方案是检查所单击的目标是否在具有特定类名/ ID /选择器的另一个元素内

我需要一些不同的东西，我已经将父元素（弹出容器）保存在变量中。我需要知道clicked元素是否在该保存的元素内。

使用已经找到的解决方案，我遇到了一个问题，因为我在页面上将有多个弹出窗口，因此，如果我打开了一个弹出窗口，然后单击另一个，则第一个弹出窗口将保持打开状态而不是关闭，那就是因为使用其他解决方案，我正在使用弹出窗口容器类检查它们都具有的元素，这意味着第一个弹出窗口不会关闭。

Answer 1

这取决于您希望方法的性能如何，但这是一个简洁的选项，假设element和container都是jQuery对象。

if(element.parents().find(container).length == 1){
   // do work
}

Answer 2

我想出了一个适用于当前应用的解决方案。

$(document).on("click",".js_popup-trigger", function(e){
    e.preventDefault();

    //Set variables
    var element     = $(e.currentTarget).closest('.js_popup-trigger'),
        container   = element.parent('.js_popup-container'),
        menu        = element.next('.js_popup-menu');

    //Toggle the menu
    menu.fadeToggle(200);

    //Add the open classes to the container and trigger
    container.toggleClass('js_popup-container--open');
    element.toggleClass('js_popup-trigger--open');

    /*  Create a click listener for the document
    *   This is to close the menu if clicked outside of it */
    $(document).click(function closePopup(e){

        //If the clicked item is not in the popup, close it
        if(!$(e.target).closest(container[0]).length && element.is(":visible")){

            //Close the popup
            menu.fadeOut(200);

            //Remove the added classes
            container.removeClass('js_popup-container--open');
            element.removeClass('js_popup-trigger--open');

            //Unbind the closePopup function from the document
            $(document).unbind('click',closePopup);
        }
    });
});

这使得您可以在同一页面上添加任意数量的弹出窗口，并且它们都将独立于其他页面工作-我发现的所有其他解决方案都使用通用类来检查弹出窗口是否处于打开状态，而不是一个弹出窗口。实际的元素/对象，这意味着如果您打开了另一个具有相同类的弹出窗口，则单击新的弹出窗口将不会关闭第一个弹出窗口。这种方法可以解决该问题。

希望这对其他人有帮助，如果有人有更好的主意，那么我很想听听他们的想法！

jQuery检查对象元素是否在另一个元素内

2 个答案: