我有一个脚本应该将手风琴功能添加到垂直菜单。我主要使用来自this blog的代码。我制作的菜单包含多个级别，我在this jsFiddle中创建的示例只有3个级别，但我打算使用更多（这是我的客户端的要求）。
当一个元素具有“selected”类时，我只想在页面加载时立即显示该元素及其父元素。在示例中，元素显示为绿色，但当然也应显示该元素的父元素。当用户选择要展开的其他元素时，它应隐藏第一个元素并显示刚刚单击的元素的内容。
请先看看这个例子，然后尝试一下。然后将其与下面进行比较。
这是菜单首先加载的方式：
- Site 1
- Site 1, page 1
- Site 1, page 2
- Site 1, subsite 1
- Site 1, subsite 1, page 1
- Site 1, subsite 1, page 2
- Site 1, subsite 2
- Site 1, page 3
- Site 2
正如您所看到的，唯一应该立即可见的是包含HTML中“选定”类的元素。所有其余的应该简单地崩溃。当然，只要用户点击另一个子网站，或者在网站1或网站2上，它就应该折叠当前具有“已选择”的子网站，并打开已被点击的其他元素。它现在的行为绝对不是我想要的，我已经尝试了很多但到目前为止没有成功。
我无法理解如何解决这个问题。自从上周以来我一直在尝试让它成功，我仍然被卡住了。因此，如果有人可以看一看并告诉我我做错了什么以及为什么会这样做，我真的很感激。
一些其他信息：此菜单将在SharePoint 2013环境中使用，它将替换SharePoint Quick Launch菜单。
提前感谢您的时间！
修改：
如果jsFiddle变得不可用，这里是HTML和JavaScript代码。
HTML：
<body>
<div id="sideNavBox">
<ul id="rootMenu" class="static root">
<li class="static level-0 selected"><a class="static menu-item-li" href="#"><span>Site 1</span></a>
<ul class="static level-0-ul selected">
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 1</span></a></li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 2</span></a></li>
<li class="static level-1 selected"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1</span></a>
<ul class="static level-1-ul selected">
<li class="static level-2 selected"><a class="static menu-item-li selected" href="#"><span>Site 1, subsite 1, page 1</span></a></li>
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1, page 2</span></a></li>
</ul>
</li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, subsite 2</span></a>
<ul class="static level-1-ul">
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 1</span></a></li>
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 2</span></a></li>
</ul>
</li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 3</span></a></li>
</ul>
</li>
<li class="static level-0"><a class="static menu-item-li" href="#"><span>Site 2</span></a>
<ul class="static level-0-ul">
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 1</span></a></li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1</span></a>
<ul class="static level-1-ul">
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1, page 1</span></a></li>
</ul>
</li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2</span></a>
<ul class="static level-1-ul">
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 1</span></a></li>
<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 2</span></a></li>
</ul>
</li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 2</span></a></li>
<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 3</span></a></li>
</ul>
</li>
</ul>
</div>
JavaScript：
// Set dynamic CSS logic:
if($('#sideNavBox .menu-item-li.selected').length){
// Propagates the selected class, up the three:
$('li.static').removeClass('selected');
$('#sideNavBox .menu-item-li.selected').parents('li.static').addClass('selected');
// Collapses top siblings of selected branch:
$('#sideNavBox .menu-item-li.selected').parents('li.static').last().siblings().find('> ul').hide();
$('#sideNavBox .menu-item-li.selected').parents('li.static').siblings().find('> ul').hide();
}
else {
$('#sideNavBox .root.static > li.static > ul').hide();
}
/* CODE INTENDED FOR COLLAPSING AND EXPANDING THE level-0 AND level-0-ul ELEMENTS */
$('#sideNavBox .root.static > li.static.level-0').each(function(){ // For each element,
if($(this).find('ul').length){ // That has a ul inside it,
$(this).addClass('father').click(function(){ // Add the class 'father' to it.
if($(this).children('ul').css('display') != 'none'){
$(this).removeClass('selected').children('ul').slideUp();
}
else {
/*collapse-siblings*/
$(this).siblings().removeClass('selected').children('ul').slideUp();
/*expand*/
$(this).addClass('selected').children('ul').slideDown();
}
});
}
});
/* SAME CODE AS ABOVE BUT NOW INTENDED FOR COLLAPSING AND EXPANDING THE level-1 AND level-1-ul ELEMENTS */
$('#sideNavBox .root.static > li.static > ul.static > li.static').each(function(){
if($('#sideNavBox .root.static > li.static > ul.static > li.static').find('ul').length){
$(this).addClass('father2').click(function(){
if($(this).children('ul').css('display') != 'none'){
$(this).removeClass('selected').children('ul').slideUp();
}
else {
/*collapse-siblings*/
$(this).siblings().removeClass('selected').children('ul').slideUp();
/*expand*/
$(this).addClass('selected').children('ul').slideDown();
}
});
}
});
/* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR FOR level-0 AND level-0-ul ELEMENTS */
$('#sideNavBox .root.static > li.static > a.static').click(function(e) {
/*Prevent the link from activating*/
e.preventDefault();
/*Upon clicking header, show contents*/
$('#sideNavBox .root.static > li.static').addClass('selected').children('ul').slideUp();
});
/* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR BUT NOW FOR level-1 AND level-1-ul ELEMENTS */
$('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1 > a.static').click(function(e) {
/*Prevent the link from activating*/
e.preventDefault();
/*Upon clicking header, show contents*/
$('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1').addClass('selected');
$('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1').children('ul.level-1-ul').slideUp();
});
答案 0 :(得分：1)
为什么不做一些像
这样简单的事情$("#rootMenu li>a").click(function(e){
var tt = $(this).closest("li");
if(tt.hasClass("selected"))
{
//Collapse all children
tt.removeClass("selected");
$("ul",tt).slideUp(500);
tt.removeClass("selected");
}
else
{
//expand first level ul, a.k.a direct child
$(">ul",tt).slideDown(500);
tt.addClass("selected");
}
});
答案 1 :(得分：1)
在这里，你是我的老同学：http://jsfiddle.net/wxu6f/6/
花了一些时间，但至少它正在工作......我想？
function accordionMe(selector, initalOpeningClass) {
var speedo = 300;
var $this = selector;
var accordionStyle = true; // fancy or not as fancy.. (just set it to true)
// disable all links with # as href, or the page will jump like a chicken on coce
$this.find("li").each(function(){
// Find all these links
if ($(this).find("ul").size() != 0) {
// and disable them if needed
if ($(this).find("a:first").attr('href') == '#') {
$(this).find("a:first").click(function(){ return false; });
}
}
});
// Hide every ul first
$("#rootMenu li>ul").hide();
// Open all items (depending on the class you chose)
$this.find("li."+initalOpeningClass).each(function(){
$(this).parents("ul").slideDown(speedo);
});
// and now.. time for magic
$this.find("li a").click(function(){
if ($(this).parent().find("ul").size() != 0) {
if (accordionStyle) {
if(!$(this).parent().find("ul").is(':visible')){
// get all parents
parents = $(this).parent().parents("ul");
// get all visible ul's'
visible = $this.find("ul:visible");
// Loop through
visible.each(function(visibleIndex){
// check if parent was closed
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
// if closed, close parent
if(close)
if($(this).parent().find("ul") != visible[visibleIndex])
$(visible[visibleIndex]).slideUp(speedo);
});
}
}
// if the parent was shown at first, hide him and vica versa
if($(this).parent().find("ul:first").is(":visible"))
$(this).parent().find("ul:first").slideUp(speedo);
else
$(this).parent().find("ul:first").slideDown(speedo);
}
}); // einde klik event
}
accordionMe($("#rootMenu"), "selected");