2013-05-06 1 views
1

나는 메뉴 구조의이 종류가 : 이제JQuery와는 : 활성 LI 클래스로 설정 아이 =으로 UL을 보여

<ul id="accordion"> 
<li><a href="#">Books</a> 
    <ul> 
    <li><a href="thrillers.html">Thrillers</a></li> 
    <li><a href="scifi.html">Sci-fi</a></li> 
    <li><a href="nf.html">Non-fiction</a></li> 
    </ul> 
</li> 
<li><a href="#">Games</a> 
    <ul> 
    <li><a href="rpg.html">RPG</a></li> 
    <li><a href="sim.html">Simulations</a></li> 
    <li><a href="action.html">Action</a></li> 
    </ul> 
</li> 
</ul> 

(등)

를, 우리 사람들은 "클릭 RPG "게임 하위 메뉴를 RPG 페이지에서 열어 보겠습니다. 그래서,이 선택되어 LI에 클래스를 추가하기로 결정 : 이제

... 
<ul> 
    <li class="active"><a href="rpg.html">RPG</a></li> 
    <li><a href="sim.html">Simulations</a></li> 
    <li><a href="action.html">Action</a></li> 
</ul> 
... 

, 내가 뭘하려고하고있는 것은 jQuery를 클래스 = "활성"그 다음 열기 UL과 UL을 찾을 것입니다 .

난 그냥이 jQuery를 :

내가 원하는 사람이 열 수있는 단지로의 onLoad 부분 후 필요합니까 무엇
<script> 

$(document).ready(function() { 

    //hide all submenu's onLoad 
    $('#accordion li').children('ul').slideUp('fast'); 

    $('#accordion a.item').click(function() { 

     /* FIRST SECTION */ 

     //slideup or hide all the Submenu 
     $('#accordion li').children('ul').slideUp('fast'); 

     //remove all the "Over" class, so that the arrow reset to default 
     $('#accordion a.item').each(function() { 
      if ($(this).attr('rel')!='') { 
       $(this).removeClass($(this).attr('rel') + 'Over'); 
      } 
     }); 

     /* SECOND SECTION */   

     //show the selected submenu 
     $(this).siblings('ul').slideDown('fast'); 

     //add "Over" class, so that the arrow pointing down 
     $(this).addClass($(this).attr('rel') + 'Over');   

     return false; 

    }); 

}); 

</script> 

?

답변

2

이 도움이 될 수 있습니다 :

$('#accordion > li > ul > li.active').parent().slideDown('fast'); 
+0

굉장합니다, 감사합니다. 단순 해 보이지만> 문자를 사용하지 않았습니다. 그래서 나는 성공하지 못했습니다. 다시 한번 감사드립니다. – user2353495

2

시도가 직접 아이 > 활성 리튬을 얻을 :

$(document).ready(function() { 
    $('#accordion li').children('ul').slideUp('fast'); //<--hide all child uls 
    $('#accordion > li').click(function() { ///<---perform a click event on li 
     $(this).addClass('active').siblings('li').removeClass('active'); //<--add active class to the clicked element and remove from other siblings li 
     $(this).siblings('li').find('ul').slideUp('fast'); // <---find the ul in the siblings and slide those up 
     $('> ul', this).slideDown('fast'); // <--then perform the slideDown 
    }); 
}); 

FIDDLE DEMO 당신은 이것을 시도 할 수 있습니다.