FadeToggle이 전체 목록을 확장합니다.

Question

드롭 다운 메뉴를 토글하면 전체 목록이 확장됩니다. 선택한 목록 만 확장하는 방법을 알아 내려고했지만 문제가 어디에 있는지 알지 못했습니다.

JSFiddle http://jsfiddle.net/Cx4CK/6/

HTML

<ul> 
<li><h1>Applications</h1> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
</li> 
<li><h1>Forum</h1> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
</li> 
<li><h1>Guilds</h1> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
</li> 
<li><h1>Imageboards</h1> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
</li> 
<li><h1>Projects</h1> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
</li> 
</ul> 

CSS

.navigation ul li h1 { 
    background : #000000; 
    border-right : 3px solid #ffffff; 
    color : #ffffff; 
    display : table; 
    float : right; 
    font-size : 28px; 
    font-weight : 100; 
    margin : 0; 
    margin-bottom : 3px; 
    padding : 6px; 
} 
.navigation ul li h1:hover { 
    border-right : 3px solid #f43058; 
    color : #f43058; 
} 
/* Positioning */ 
.navigation { 
    font-family : 'Open Sans Condensed', sans-serif; 
    margin : 12px; 
    position : fixed; 
    right : 0; 
    top : 0; 
} 
.navigation ul { 
    font-size : 20px; 
    margin : 0; 
    padding : 0; 
    text-align : right; 
} 
.navigation ul li { 
    clear : right; 
    color : #ffffff; 
    float : right; 
    list-style-type : none; 
} 
/* Second Level */ 
.navigation ul li:hover ul { 
    display : block; 
} 
.navigation ul li ul li { 
    background : #000000; 
    border-right : 3px solid #ffffff; 
    color : #ffffff; 
    display : table; 
    font-size : 18px; 
    margin-bottom : 3px; 
    padding : 6px; 
} 
.navigation ul li ul li:hover { 
    border-right : 3px solid #f43058; 
    color : #f43058; 
} 

JQuery와

당신이 클릭 된 요소의 아이를 원하기 때문에

$(this).find('ul li').fadeToggle("fast");

에

subMenu.fadeToggle("fast");

를 교체함으로써

jQuery(document).ready(function() { 

    var subMenu = jQuery("ul li ul li"); 
    var linkClick = jQuery("ul li").filter(":has(ul)"); 

    subMenu.hide(); 

    linkClick.click(function (e) { 
     e.preventDefault(); 
     subMenu.fadeToggle("fast"); 
    }); 
}); 

Answer 1

. 모든 요소가 아닙니다.

업데이트 됨 : http://jsfiddle.net/Cx4CK/7/