我编写了以下插件 - 它运行完美。它完全符合我希望它在所有情况下所做的 - 但它有点慢。我想我可能会服从一个更聪明的社区，看看是否有人看到我可以显着提高其性能的方法。
基本上，它需要一个结构化的ul并具有典型的下拉/抽屉功能。我还发布了它期望的 HTML 片段。
警告——我包含了大量的 HTML，因为我想展示它使用了多少项目——这可能会告诉你为什么它很慢。
我相当确定放缓仅仅是因为我告诉它处理的项目数量荒谬。但是因为我希望它在单击任何其他菜单时折叠所有其他菜单，所以我必须将它们全部附加 - 对吗？
我再说一遍——你在这里看到的行为是完全正确的。我还包括一个 jsFiddle，所以你可以看到它的实际效果。
jsFiddle 链接（工作中）
jQuery Wiring（文档加载）
$(document).ready(function() {
$(".dropdown > a").addClass("root");
var $sidebar_dropdown = $('li[data-role="sidebar-dropdown"]');
var $submenu_dropdown = $('li[data-role="sidebar-sub-dropdown"]');
var $remote_menus = $('a.remote');
$sidebar_dropdown.drawer({
openClass: 'sidebar-dropdown-open'
});
$submenu_dropdown.drawer({
openClass: 'sidebar-sub-dropdown-open'
});
});
实际插件（Javascript）
(function ($) {
$.fn.drawer = function (options) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend({
openClass: 'open',
openClassName: function () { return '.' + this.openClass; }
}, 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) {
$(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();
e.stopPropagation();
}).on("mouseleave", function () {
$(this).children(".dropdown-menu").hide().delay(300);
});
})
};
})(jQuery);
HTML
<div class="page-sidebar">
<ul>
<li class="dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a class="remote" href="#">Test Menu Item</a></li>
<li><a class="remote" href="#">Test Menu Item</a></li>
<li><a class="remote" href="#">Test Menu Item</a></li>
</ul>
</li>
<li class="dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li class="dropdown" data-role="sidebar-sub-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">
Test Menu Item,
<br />
<small>Test Menu Item Small</small>
</a>
</li>
<li><a href="#" class="remote">
Test Menu Item,
<br />
<small>Test Menu Item Small</small>
</a>
</li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class="dropdown" data-role="sidebar-sub-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class="dropdown" data-role="sidebar-sub-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class="dropdown" data-role="sidebar-sub-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
<li class="dropdown" data-role="sidebar-sub-dropdown">
<a href="#" class="remote">Test Menu Item</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a href="#" class="remote">Test Menu Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.page-sidebar {
display: block;
width: 213px;
float: left;
min-height: 100% !important;
height: auto;
background-color: #EBEBEB;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-left: 7px;
}
.page-sidebar ul.sub-menu.light {
background-color: #F9F9F9 !important;
}
.page-sidebar ul.sub-menu {
padding-top: 5px;
padding-bottom: 5px;
}
.page-sidebar .sidebar-dropdown-menu {
display: none;
}
.page-sidebar ul {
margin-left: 0;
list-style: none;
background-color: #EBEBEB;
}
.page-sidebar > ul > li > a {
font-size: 1.1em;
}
.page-sidebar > ul > li.dropdown {
position: relative;
}
.page-sidebar li {
display: list-item;
line-height: 20px;
position: relative;
}
.dropdown, .dropdown > a {
font-weight: 600 !important;
}
ul li, ol li {
display: list-item;
font-size: 14px;
line-height: 20px;
}
.dropdown, .dropdown > a {
font-weight: 600 !important;
}
.page-sidebar a {
font-family: 'Almendra', '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;
}
.page-sidebar > 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;
}
</p>