Question

I have created this code to do a very nice, elegant pull-down sidebar navigation system – and I am including a jsFiddle as well for convenience.

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

It works almost exactly like I want. This is the required functionality.

• Top Level Items, when clicked, should slide their menus into view (Perfect)
• Top Level Items, when clicked, should close all other open top level items (Perfect)
• Top Level Items, when clicked, if opened, should close again (Seeming to Work)
• Child Menus should be supported, which have all of this same functionality (FAIL!)

The problem I am having is with the child menus. On the fiddle, if you click on Top Level (3) you will see several child menus. Clicking on one causes the entire menu to collapse again, and you must click on the Top Level (3) again to open it.

Any ideas how I can address this issue? The link to jsfiddle is above, but I am putting it on the question as well.

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>

​

Relevant CSS (Just makes it look right)

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

You’re very nealry there. The problem is you have added the line:

e.preventDefault();

But to successfully stop the propagation as it says in your code comment you need to include:

e.stopPropagation();

Or simply return false; which will accomplish both. Here’s an updated jsFiddle: http://jsfiddle.net/pC34j/8/