jQuery垂直手风琴菜单：单击子节点时父节点折叠

我有一个脚本，应该在垂直菜单中添加手风琴功能。我主要使用this blog的代码。我制作的菜单包含多个层次，我在this jsFiddle中创建的示例只有3个层次，但我计划使用更多（这是我的客户的要求）。

当一个元素具有“selected”类时，我只希望该元素及其父元素在页面加载后立即显示。在元素着色为绿色的示例中，但该元素的父代当然也应该显示。当用户选择不同的元素进行展开时，它应该隐藏第一个元素并显示刚被点击的元素的内容。

请首先看一下这个例子，并尝试一下。然后将其与下面进行比较。
这是菜单应该怎么样像摆在首位，只要在页面加载：jQuery垂直手风琴菜单：单击子节点时父节点折叠

- 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快速启动菜单。

在此先感谢您的时间！

编辑：
万一的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(); 
});

来源

2013-03-25 Magali

最明显的问题是点击子元素不会影响正确的元素。我没有看到您的点击事件中的哪些内容是基于clicked元素进行的，您只是从顶层开始工作，这在逻辑上没有任何意义。 **作为附注**，您的代码应该包含在您的问题中，以防万一jsfiddle变得无法访问。 – 2013-03-25 15:27:00

那么你建议我做什么呢？ – Magali 2013-03-26 09:29:06

在这里，你是我的老队友类：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");

来源

2013-03-26 20:50:56 mathiasb

'感谢好友！这个窍门！ – Magali 2013-03-28 13:41:57

为什么不为

$("#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"); 
    } 
});

http://jsfiddle.net/wxu6f/4/

简单的东西3210

来源

2013-03-26 10:59:49 Bluemagica

这很好！但是我应该添加什么来使页面加载时所有内容都崩溃，并且只有扩展类为“selected”的节点？ – Magali 2013-03-26 11:18:29

'$（function（）{ }）' – Bluemagica 2013-03-26 11:20:37

jQuery垂直手风琴菜单：单击子节点时父节点折叠

回答

相关问题