我创建了这段代码来做一个非常漂亮、优雅的下拉侧边栏导航系统——为了方便起见，我还包括了一个 jsFiddle。
http://jsfiddle.net/ciel/pC34j/
它几乎完全像我想要的那样工作。这是必需的功能。
- 单击顶级项目时，应将其菜单滑动到视图中（完美）
- 单击顶级项目时，应关闭所有其他打开的顶级项目（完美）
- 顶级项目，当点击时，如果打开，应该再次关闭（似乎工作）
- 应支持具有所有相同功能的子菜单（失败！）
我遇到的问题是子菜单。在小提琴上，如果您单击顶级（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>
</p>
相关的 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;
}
</p>