jQuery，$（文档）正在捕获我不希望它捕获的内容

我有一个下拉菜单系统设置，如此

这是HTML页面的脚本部分

    $('.ui-dropdown').each(function () {
        $(this).dropdown();
    });

然后在实际的HTML中

            <li class="ui-dropdown">
                <a href="#">Dropdown Menu</a>
                <div>
                    Test
                </div>
            </li>

现在，这一切正常，但我希望当有人单击

div

或菜单触发按钮内的组件以外的任何位置时，菜单消失。为了尝试修复这种方法，我添加了以下代码

$(document).click(lift);

这很有效，有点太好了。它（显然）捕捉到了一切，包括点击按钮、菜单等。因此我尝试用以下功能修复它

选项定义如下

    options.button = $(this);
    options.menu = $(this).find('> div');
    options.links = $(this).find('> a');

    options.button.click(function (e) {
        options.menu.is(':visible') ? lift() : drop();
        e.stopPropogation(); // prevent event bubbling
    });

    options.links.click(function (e) {
        e.stopPropagation(); //prevent event bubbling
    });

    options.menu.click(function (e) {
        e.stopPropagation(); // prevent event bubbling
    });

但还是没有用。如何获取

$（文档）。单击要与之交互的菜单时，单击（提升）

将被忽略

---

下面是整个jQuery插件，仅供参考

jQuery.fn.dropdown = function () {
    var defaults = {
        class: null,
        button: null,
        menu: null
    };
    return this.each(function () {

        // initialize options for each dropdown list, since there
        // very well may be more than just one.
        var options = $.extend(defaults, options);

        // specifically assign the option components.
        options.class = '.' + $(this).attr('class');
        options.list = $(this); // keep a constant reference to the root.
        options.button = $(this).find('> a');
        options.menu = $(this).find('> div');

        // bind the lift event to the document click.
        // This will allow the menu to collapse if the user
        // clicks outside of it; but we will stop event bubbling to
        // keep it from being affected by the internal document links.
        $(document).click(function (e) {
            var $target = $(e.target);

            // check to see if we have clicked on one of the dropdowns, and if so, dismiss
            // the execution. We only want to lift one if we're not trying to interact with
            // one.
            if ($target.is(options.class) || $target.closest(options.class).length)
                return false;

            lift(e);
        });

        // when the button is clicked, determine the state of the
        // dropdown, and decide whether or not it needs to be lifted
        // or lowered.
        options.button.click(function (e) {
            options.menu.is(':visible') ? lift() : drop();
            e.stopPropogation(); // prevent event bubbling
        });

        // drop the menu down so that it can be seen.
        function drop(e) {
            // show the menu section.
            options.menu.show();
            // style the button that drops the menu, just for aesthetic purposes.
            options.list.addClass("open");
        }

        // lift the menu up, hiding it from view.
        function lift(e) {
            if (!options.menu.is(':visible'))
                return;
            options.menu.hide();


            // style the button that drops the menu, just for aesthetic purposes.
            options.list.removeClass('open');
        }
    });
};

---

在提升功能中，为什么不检查元素id/class是否不是您的下拉列表，如果是，则将其隐藏

例如：

function lift()
{
    if(this.getAttribute('class') != 'ui-dropdown')
    {
        // Hide it
    }
}

$('.ui-dropdown').click(function() {
   $(this).siblings('.ui-dropdown').hide();
   $(this).show();
   return false;
});

$(document).click(function() {
    $('ui-dropdown').hide();
);

---

编辑：这是可行的，但不幸的是在这种情况下不行。非常糟糕的表现，请查看下面尼克·克雷弗的评论

您可以使用以下选择器选择菜单以外的所有内容

$（'：非（选择器）'）

---

您可以在文档选择器上尝试更快的等效方法。not（选择器）来选择页面上除菜单之外的所有内容。但尚未对此进行测试。

您需要首先在单击时检查目标，以确保它们没有在列表中单击

jQuery.fn.dropdown = function () {
    var defaults = {
        button: null,
        menu: null,
        links: null,
        identClass: 'my-dropdown'
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        $(this).addClass( options.identClass );
        /* ... */
    });

    /* ... */

    // lift the menu up, hiding it from view.
    function lift() {
        if (!options.menu.is(':visible'))
            return;
        options.menu.hide();
    }
    $(document).click(function(){
        var $target = $(e.target);
        if ( $target.is('.' + options.identClass) || $target.closest('.' + options.identClass).length ) {
            return;
        }
        lift();
    });
};

---

在本例中，我所做的是关闭所有菜单，然后显示实际单击的菜单

例如：

function lift()
{
    if(this.getAttribute('class') != 'ui-dropdown')
    {
        // Hide it
    }
}

$('.ui-dropdown').click(function() {
   $(this).siblings('.ui-dropdown').hide();
   $(this).show();
   return false;
});

$(document).click(function() {
    $('ui-dropdown').hide();
);

---

---

有没有办法将其与多个事物级联？你能举个例子吗？对于您建议我如何使用它，我有点困惑。请不要这样做，这是一种非常非常糟糕的解决问题的方法，可能会绑定数千个事件处理程序。不支持not选择器IE@Wolfy87-这是jQuery，到处都支持它，但在这种情况下它仍然是一个非常糟糕的主意。这是一个公平的评论，我没想过。好了，我的两分钱就到这里。你有一个例子页吗？您的方法应该是停止

文档

接收

单击

，因此这里有些不太对劲…您的方法是正确的。请原谅，我是jQuery的新手。我不知道该怎么做。我该如何检查呢？我已经添加了一个示例，它可能需要tweeking，因为它没有经过测试，但这不会引起屏幕上的“闪现”吗？我不知道如何将其合并到jQuery插件代码中。我将这些都包装到一个名为.dropdown（）的简单插件方法中@Rickjaah不，没有任何形式的“闪光”。考虑单击菜单：1）关闭所有菜单，2）显示所选菜单。这是直观的功能。我还是有点困惑。如果我发布整个插件会有帮助吗？但是如果用户决定再次点击同一个菜单，这种情况确实会发生。如果您使用类似$（this）.sides（.ui dropdown）.hide（）的东西，如果所有这些选择器都具有相同的父项，那么您将是正确的。如果有帮助的话，我已经更新了文章以显示整个插件。@Stacey我相信我的新示例将适用于您。它首先检查您是否单击了

.ui下拉列表

元素，然后检查它是否是

.ui下拉列表

的子元素。这确实解决了$（文档）的问题。单击。但是使用这个方法，如果通过再次单击菜单直接调用lift（）方法，它将不起作用；？这会导致太多的事件连接吗？让你的插件添加一个类。现在参考我的例子。