jquery - 在 jQuery 中子子子级触发父级行为有困难

Question

我创建了这段代码来创建一个非常漂亮、优雅的下拉侧边栏导航系统 - 为了方便起见，我还添加了一个 jsFiddle。

http://jsfiddle.net/ciel/pC34j/

它几乎完全按照我想要的方式工作。这是所需的功能。

• 点击顶级项目时，应将其菜单滑入 View (完美)
• 点击顶级项目后，应关闭所有其他打开的顶级项目(完美)
• 顶级项目，点击后，如果打开，应该再次关闭(看起来有效)
• 应该支持子菜单，它具有所有相同的功能(失败!)

我遇到的问题是子菜单。在 fiddle 上，如果您单击顶级 (3)，您将看到几个子菜单。单击其中一个会导致整个菜单再次折叠，您必须再次单击顶级 (3) 才能将其打开。

有什么想法可以解决这个问题吗？上面有 jsfiddle 的链接，但我也将其放在问题上。

Javascript

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

        var open = function(e) {
            // mark this menu as open
            $(e).addClass(settings.openClass);

            // retrieve the appropriate menu item
            var $menu = $(e).children(".dropdown-menu, .sidebar-dropdown-menu");

            // slide down the one clicked on.
            $menu.slideDown(100);
            $menu.addClass('active');
        };

        var close = function(e) {
            console.log("closing", e);
            $(e).removeClass(settings.openClass);
            // retrieve the appropriate menu item
            var $menu = $(e).children(".dropdown-menu, .sidebar-dropdown-menu");
            // slide down the one clicked on.
            $menu.slideUp('fast');
            $menu.removeClass('active');
        };

        return this.each(function() {
            $(this).on('click', function(e) {
                // transform the selector into a 'className'
                var $className = $('.' + settings.openClass);
                var $node = $(this); // the current node
                var $target = $(e.target); // the actual DOM target
                // examine all existing dropdown menus that are
                // currently open, and close them - excluding the
                // current one.
                $className.not($(this)).each(function() {
                    close($(this));
                });

                if ($target.hasClass("root") && $node.hasClass(settings.openClass)) {
                    close($(this));
                }
                else {
                    // open the selected dropdown menu
                    open($(this));
                }

                // prevent default event propogation
                e.preventDefault();
            }).on("mouseleave", function() {
                $(this).children(".dropdown-menu").hide().delay(300);
            });

        })
    };

})(jQuery);
$(document).ready(function() {
    $(".dropdown > a").addClass("root");
    $('[data-role="sidebar-dropdown"]').drawer({
        openClass: 'sidebar-dropdown-open'
    });
    $('[data-role="sidebar-sub-dropdown"]').drawer({
        openClass: 'sidebar-sub-dropdown-open'
    });
});​

HTML

<ul>
    <li class="dropdown" data-role="sidebar-dropdown">
        <a href="pages/....html" class="remote"><i class="icon-libreoffice"></i>Top Level (A)</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a class="remote" href="pages/....html">Sub Link</a></li>
            <li><a class="remote" href="pages/....html">Sub Link</a></li>
            <li><a class="remote" href="pages/....html">Sub Link</a></li>
        </ul>
    </li>
    <li class="dropdown" data-role="sidebar-dropdown">
        <a href="pages/.....html" class="remote"><i class="icon-book"></i>Top Level (B)</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
            <li><a href="pages/....html" class="remote">Sub Link</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="pages/....html" class="remote"><i class="icon-trophy"></i>Top Level (C)</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="pages/....html" class="remote">Sub Level (Alpha)</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li>
                        <a href="pages/....html" class="remote">Sub-Sub Link
                        </a>
                    </li>
                    <li>
                        <a href="pages/.....html" class="remote">Sub-Sub Link
                        </a>
                    </li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="pages/....html" class="remote">Sub Level (Beta)</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="pages/....html" class="remote">Sub Level (Gamma)</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="pages/....html" class="remote">Sub Level (Delta)</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="pages/....html" class="remote">Sub Level (Kappa)</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="pages/....html" class="remote">Sub-Sub Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

​

相关CSS(只是让它看起来正确)

ul > li > a {
    font-size: 1.1em;
}

.dropdown, .dropdown > a {
    font-weight: 600 !important;
}

a {
    font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11pt;
    letter-spacing: 0.01em;
    line-height: 14pt;
    color: black;
    display: block;
    width: 100%;
    padding: 5px 20px 5px 10px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
}

a, .link {
    font-family: 'Almendra', 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11pt;
    color: #2E92CF;
    text-decoration: none;
}

*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul > li.dropdown::after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 100%;
    margin-left: -20px;
    width: 16px;
    height: 16px;
    background: no-repeat;
    background-position: 0 -1586px;
    z-index: 200;
}

ul.sub-menu.light {
    background-color: #F9F9F9 !important;
}

ul.sub-menu {
    padding-top: 5px;
    padding-bottom: 5px;
}

.sidebar-dropdown-menu {
    display: none;
}

.page-sidebar ul {
    margin-left: 0;
    list-style: none;
    background-color: #EBEBEB;
}

ul ul {
    list-style-type: circle;
}

ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0 !important;
}

​

Answer 1

你已经很接近了。问题是您添加了以下行:

e.preventDefault();

但是要成功停止传播，如代码注释中所述，您需要包括:

e.stopPropagation();

或者简单地return false;这将完成这两个任务。这是更新的 jsFiddle:http://jsfiddle.net/pC34j/8/