JQuery slideToggle，摺疊子元素

Question

我有一個可摺疊子菜單的菜單，有3個級別的菜單，它工作正常，但我不知道如何摺疊所有子子級別時，您單擊摺疊父級。

它的工作方式是，如果你點擊1級它擴展2級，然後如果你點擊2級它擴展級別3

的問題是，當各級都打開，我需要能夠單擊級別1並同時合併級別2和級別3。此刻我正在使用slideToggle。

我粘貼了下面的代碼，我知道這是一個非常垃圾的方法，但我必須將假H標籤分配給菜單項，因爲它是由ASP生成的：菜單控件，並且它沒有唯一的ID到菜單項，所以我不得不找到解決辦法。

HTML：

<div id="Div1" class="MenuBar"> 
    <a href="#Menu1_SkipLink" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip Navigation Links</a> 
    <div class="mainmenu" id="Div2"> 
     <ul class="level1"> 
      <li><a class="level1 staticItem level1"> 
       <img src="/images/calculator.png" alt="" title="" class="icon" /><h7>Financial</h7></a></li> 
      <li><a class="level2 staticItem level2"> 
       <h10>Address</h10> 
      </a></li> 
      <li><a class="level3 staticItem level3" href="javascript:openNewWin(&#39;/Controls/Financial/AddressBook.aspx&#39;)"> 
       <h11>Address Book</h11> 
      </a></li> 
      <li><a class="level3 staticItem level3" href="javascript:openNewWin(&#39;/Controls/Financial/CustomerTypes.aspx&#39;)"> 
       <h12>Customer Types</h12> 
      </a></li> 
      <li><a class="level1 staticItem level1"> 
       <img src="/images/container.png" alt="" title="" class="icon" /><h8>Container</h8></a></li> 
      <li><a class="level2 staticItem level2"> 
       <h13>Containers</h13> 
      </a></li> 
      <li><a class="level1 staticItem level1"> 
       <img src="/images/product.png" alt="" title="" class="icon" /><h9>Product</h9></a></li> 
     </ul> 
    </div> 
    <a id="Menu1_SkipLink"></a> 

</div> 

JQuery的：

$(function() { 
    //When opening the page all level 2 and level 3 items must be hidden. 
    $(function() { 
     hideitems(); 
    }) 

    function hideitems() { 
     $('h10').slideUp(); 
     $('h11').slideUp(); 
     $('h12').slideUp(); 
     $('h13').slideUp(); 
    } 
    //Financial Click 
    $(document).ready(function() { 
     $('h7').click(function() { 
      $('h10').slideToggle(); 

     }); 
    }); 
    //Address Click 
    $(document).ready(function() { 
    $('h10').click(function() { 
     $('h11').slideToggle(); 
     $('h12').slideToggle(); 
    }); 
}) 
}); 

如何，因爲我沒有JS的主摺疊所有子水位將不勝感激任何建議。

Answer 1

在不更改標記的情況下：構建將子項目鏈接到項目的結構，並在.click()回調中使用它。

例如，你可以使用$(...).data數據與節點相關聯：

// init function : 
// we stack all level2 and level3 items as subitems of the last level1 item we met 
// we stack all level3 items as subitems of the last level2 item we met 
function init() { 
    var $menu = $('ul.level1'); 
    var lv1Itm = null, 
     lv2Itm = null; 
    $menu.find('a').each(function() { 
     var subitems; 
     var li = $(this).closest('li').get(0); 
     if ($(this).hasClass('level1')) { 
      lv1Itm = li; 
      $(li).data('subitems', []); 
     } 

     if ($(this).hasClass('level2')) { 
      lv2Itm = li; 
      $(li).data('subitems', []); 

      $(lv1Itm).data('subitems').push(li); 
     } 

     if ($(this).hasClass('level3')) { 
      $(lv1Itm).data('subitems').push(li); 
      $(lv2Itm).data('subitems').push(li); 
     } 
    }); 
} 
init(); 

$('.level1').click(function (e) { 
    var subitems = $(this).closest('li').data('subitems'); 
    var shouldHideSubmenus = $(subitems).is(':visible'); 
    if (shouldHideSubmenus) { 
     // in this case, hide all 'li' children items 
     $(subitems).slideUp(); 
    } else { 
     // in this case, only show level2 items 
     $(subitems).find('.level2').closest('li').slideDown(); 
    } 
}); 

$('.level2').click(function (e) { 
    var subitems = $(this).closest('li').data('subitems'); 
    var shouldHideSubmenus = $(subitems).is(':visible'); 
    if (shouldHideSubmenus) { 
     // in this case, hide all 'li' children items 
     $(subitems).slideUp(); 
    } else { 
     // in this case, only show level3 items 
     $(subitems).find('.level3').closest('li').slideDown(); 
    } 
}); 

fiddle

Answer 2

嘗試使用此http://jsfiddle.net/modaloda/B8b4z/1/

//Financial Click 
$(document).ready(function() { 
    $('h7').click(function() { 
     $('h10').slideToggle(); 
     $('h11').slideUp("fast"); 
     $('h12').slideUp("fast"); 
    }); 
});