javascript - stopPropagation() 的行为更令人困惑

Question

我有以下代码它需要一个<ul>单击时它会下拉内容。效果很好。问题是当 child 时它也会关闭相同类型的其他菜单。 <li>被点击了。

我使用 if 解决了这个问题子句来确定被单击的项目是否也是当前打开的项目，但我想更进一步，使它如果 parent ul点击再次，它会关闭菜单。我对如何处理这个问题有很多误解。我试图阻止子元素的传播，但它产生了相同的结果。有人可以帮忙吗？

接线(文件加载)

$(document).ready(function () {
                $('[data-role="sidebar-dropdown"]').drawer({
                    open: 'sidebar-dropdown-open',
                    css: '.sidebar-dropdown-open'
                });
        });

html

<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>

JavaScript

(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);

Answer 1

在 jQuery 事件中，您可以通过引用 e.target 来读取发起事件的节点。

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

关于关闭不是子元素的元素，与其使用全局选择器 $(selector)，不如使用相对于初始 dom 节点的选择器。传递 this 并将其存储在您的 jQuery 插件中是一种常见的做法。

return this.each(function(this)) { var $node = $(this); }

然后所有查找将像这样完成

$node.find(selector).doStuff()