1
我写了下面的插件 - 它运行完美。它完全符合我希望它在所有情况下都能做到的 - 但它有点慢。我想我可能会推迟到一个更聪明的社区，看看有没有人看到我可能大幅提高其表现的方式。寻求帮助优化一个小的jQuery插件
基本上说，它需要一个结构化的ul，并使定型下拉/抽屉功能。我还发布了它期望的HTML代码片段。
警告 - 我包含了大量的HTML，因为我想演示它使用了多少项 - 这可能会告诉您为什么它很慢。
我相当肯定，放缓仅仅是因为我告诉它处理的项目数量很可笑。但是因为我希望它在任何点击时折叠所有其他菜单，所以我必须将它们全部附加 - 对吗？
我会重复 - 你在这里看到的行为是完全正确的。我还包括一个jsFiddle，所以你可以看到它的行动。
jsFiddle Link (Working)
jQuery的接线（文件负载）
$(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'
});
});
实际插件（Java脚本）
(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>
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;
}
小提琴似乎相当快。生产速度慢吗？ –
是的，是的。也许我的机器很麻烦。这是我第一个jQuery插件，所以我想我只是做了很多错误，并会问更聪明的社区（你们）。也许我确实做对了... – Ciel
我的意思是，从我所能看到的看起来很好。很显然，每个人都有自己的设计风格，所以也许它的结构可能会有所不同。但就速度而言，我没有看到任何令人震惊的事情。通常会减慢动画速度的是同时运行很多间隔或超时，或者一次只操作一个dom，而不是一次处理所有dom。这似乎并没有表现出这些特点。 –