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垂直手風琴菜單：單擊子節點時父節點摺疊

回答

相關問題