Javascript jQuery-使用stopPropagation（）更容易混淆的行为

我有下面的代码，它需要一个

，单击时它会下拉内容。这很有效。问题是，当单击

子菜单时，它也会关闭相同类型的其他菜单

我通过使用
if
子句来确定正在单击的项目是否也是当前打开的项目，从而“修复”了此问题，但我想更进一步，这样，如果再次单击父
ul
，它将关闭菜单。对于如何处理这个问题，我有很多误解。我试图停止子元素的传播，但它产生了相同的结果。有人能帮忙吗

布线（文件加载）
html
在jQuery事件中，您可以通过引用
e.target
来读取启动事件的节点

if ($(e.target).is("li")) { // do something only if the clicked element was a li }

关于关闭非子元素的元素，您不应该执行全局选择器
$（选择器）
，而应该执行相对于启动dom节点的选择器。通常的做法是传递
这个
并将其存储在jQuery插件中

返回this.each（函数（this））{var$node=$（this）；}

然后所有的查找都会像

$node.find（selector.doStuff（）
@已修复。您是对的，用
$
存储jQuery节点集合是明智的。这不是我用
行所做的吗？返回这个。each（function（）{
？我认为这是我已经在做的。有点…除了
each（）的内部之外
您需要一种方法来引用
插件父节点
，无论您在哪个回调中。例如，在单击处理程序中，
此
将成为单击的节点，而不是作为
抽屉（）构建的顶级
插件节点
。给我一点时间，我很不明白你在说什么，但我会尝试做一些更改，看看我是否理解。是的，你正在路上。然后在
$node.on（）
中，你会执行
$node.find（settings.css）
，它只会影响该抽屉内的项目，不会影响页面上的其他抽屉。通常，除非经过设计，否则您很少希望jQuery插件泄漏到启动它的节点集合之外。此模式确保您可以拥有多个抽屉而不会发生冲突。
<ul>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="pages/.." class="remote">Link Text</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a class="remote" href="pages/...">Link Text</a></li>
            <li><a class="remote" href="pages/...">Link Text</a></li>
            <li><a class="remote" href="pages/...">Link Text</a></li>
        </ul>
    </li>
</ul>

(function ($) {
    $.fn.drawer = function (options) {
        // Create some defaults, extending them with any options that were provided
        var settings = $.extend({
            open: 'open',
            css: '.open'
        }, options);

        return this.each(function () {
            $(this).on('click', function (e) {
                // slide up all open dropdown menus
                $(settings.css).not($(this)).each(function () {
                    $(this).removeClass(settings.open);
                    // retrieve the appropriate menu item
                    var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
                    // slide down the one clicked on.
                    $menu.slideUp('fast');
                    $menu.removeClass('active');
                });


                // mark this menu as open
                $(this).addClass(settings.open);

                // retrieve the appropriate menu item
                var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
                // slide down the one clicked on.
                $menu.slideDown(100);
                $menu.addClass('active');
                e.preventDefault();
                e.stopPropagation();

            }).on("mouseleave", function () {
                $(this).children(".dropdown-menu").hide().delay(300);
            });

        })
    };

})(jQuery);

if ($(e.target).is("li")) { // do something only if the clicked element was a li }