私はこのコードを作成して、非常に優れたエレガントなプルダウン サイドバー ナビゲーション システムを実行しました。便宜上、jsFiddle も含めています。
http://jsfiddle.net/ciel/pC34j/
それは私が望むようにほぼ正確に機能します。これは必要な機能です。
- トップ レベルの項目をクリックすると、メニューがスライドして表示される (完璧)
- トップ レベルのアイテムをクリックすると、開いている他のすべてのトップ レベルのアイテムを閉じる必要があります (完全)
- トップレベルのアイテムをクリックすると、開いている場合は再び閉じる必要があります (動作しているように見えます)。
- これと同じ機能をすべて備えた子メニューをサポートする必要があります (FAIL!)
私が抱えている問題は、子メニューにあります。トップ レベル (3)をクリックすると、いくつかの子メニューが表示されます。1 つをクリックすると、メニュー全体が再び折りたたまれ、トップ レベル (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>