클릭시 펼치기 메뉴

Question

기본 메뉴가 다음과 같습니다.

<ul id="menu"> 
<li id="auctions">Auctions</li> 
<li class="submenu">Submenu 1</li> 
<li class="submenu">Submenu 2</li> 
<li class="submenu">Submenu 3</li> 
</ul> 

나는 세 개의 하위 메뉴가 텍스트 "경매"를 클릭 할 때까지 숨겨 싶어요. 그런 다음 '경매'를 두 번 클릭 할 때 다시 나타나야합니다. 필자는 이와 같은 것을 시도했습니다.

$(function() { 
    $('#auctions').click(function() {   
     $('#menu').animate({'height': '200'}); 
     $('#submenu').animate({opacity : 'toggle'}); 
    }, function() { 
     $('#menu').stop().animate({'height': '100'}); 
     $('#submenu').animate({opacity : 'toggle'}); 
    }); 
}); 

나는 정직하게 jquery를 빨아들입니다. 어떻게 접근합니까?

Answer 1

사용 jQuery's .slideToggle()도 확인 .submenu이 표시되지합니다

JAVASCRIPT :

$(function() { 
    $('#auctions').click(function(){ 
     $('.submenu').slideToggle(); 
    }); 
}); 

CSS :

.submenu{display:none;} 

DEMO : http://jsfiddle.net/dirtyd77/SLGdE/4/

Answer 2

이 기능이 작동합니까?

$('#auctions').click(function(){ 
    $("#menu, .submenu").toggle(); 
}); 

Answer 3

기본 구조는 괜찮지 만 css()은 사용하지 않습니다. 대신에 slideToggle()를 사용

$(function() { 
    $('#auctions').click(function() {   
     $('.submenu').slideToggle(); 
    }); 
}); 

Answer 4

를이 코드를 사용 해달라고 이유 : HTTP :

떨어져 당신이 "#submenu"를 사용에서 당신의 HTML에서

$(function() { 
$('.submenu').hide(); 
    $('#auctions').click(function() {   
     //$('#menu').animate({'height': '200'}); 
     $('.submenu').toggle("slow"); 

}); 

}); 

의 class 당신이 ".submenu"