我写了下面的插件 - 它运行得很好。它完全正确我想在所有情况下做什么 - 但它有点慢。我想我可能会推荐一个更聪明的社区，看看是否有人看到了我可能会大幅提升其表现的方式。
基本上，它采用结构化的ul并制作定型下拉/抽屉功能。我还发布了他期望的HTML片段。
我很确定减速仅仅是因为我告诉它要处理的物品数量太多。但是因为我希望它在点击任何菜单时折叠所有其他菜单，我必须将它们全部附加 - 对吧？
我会重复 - 你在这里看到的行为是完全正确的。我还包括一个jsFiddle，所以你可以看到它在行动。
$(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'
});
});
(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);
<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>
.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;
}
答案 0 :(得分：0)
我试着了解情况。 我在浏览你的插件，看起来不错。 究竟那是什么慢？ 手风琴效果很慢？