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