JQuery hide ULs and only expand once particular class set (bit like an accordion)

问题

Right folks,

After battling with a JQuery Accordion trying to do what I want I think hiding all secondary UL's and only expanding them once a class my CMS sets automatically on lis would be the easiest thing. I want to have accordion type functionality, but it must expand/slide down when that particular ul is active. I have realized that a typical JQuery accordion will not suit, as I will not have toggle li's present in the CMS menu output.

Menu code here:

<ul id="amenu">
  <li><a href="anotherpage.html">Home</a></li><li><span class="currentbranch0">
      <a href="anotherpage2.html">Content</a></span>
        <ul class="multilevel-linkul-0" title="">
           <li><a href="subpage.html">Content 2</a></li>
           <li><span class="currentbranch1"><a href="subpage.html">Content 3</a></span></li>
       </ul>
  </li>

//How to target this command to multilevel-linkul-0 class?
$(function(){
      $('ul li ul').slideDown();
});

(Fiddle: http://jsfiddle.net/Dmhcq/5/)

-- Updated Fiddle to show exactly what I mean, I only want the secondary UL with currentbranch1 to slideDown

With this code, basically anything with span class "currentbranch1" should slideDown and the rest should remain hidden. I have been looking at sample JQuery code and am completely at a loss even where to start, I'm not a JS programmer :) . So unfortunately above is my best stab at it. If anyone has any advice it would be much appreciated. :)

Cheers

Nick

回答1:

It's simple. You need to do it the other way around. Find the element that has the class "currentbranch1" and traverse up to the "multilevel-linkul-0" parent and tell that to slide down.

Code

//How to target this command to multilevel-linkul-0 class?
$(function(){
      $('.currentbranch1').parents('ul.multilevel-linkul-0').slideDown();
});

Here is an example of Fiddle.

来源：https://stackoverflow.com/questions/15135822/jquery-hide-uls-and-only-expand-once-particular-class-set-bit-like-an-accordion

标签

jquery

html-lists

accordion

slidedown