이렇게하는 것이 가장 좋은 방법입니까?

Question

두 개의 드롭 다운이있는 탐색 모음이 있습니다 (중첩 된 ul처럼). 나는 부모가 클릭되었을 때 하위 그룹을 토글하려고합니다. 다른 부모가 클릭되면 하나의 하위 탐색을 숨 깁니다.

<div id="nav-bar"> 
    <a href="#">A link</a> | 
    <ul> 
    <li id="feedback"> 
     <a href="javascript:void(0);">Feedback</a> 
     <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
     </ul> 
    </li> 
    </ul> | 
    <a href="#">Another link</a> | 
    <ul> 
    <li id="location"> 
     <a href="javascript:void(0);">Pick your location</a> 
     <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

그리고 코드 : 여기에 마크 업 아직

//hide the subnavs and give them a little down arrow 
$('ul.subnav').hide().parent().append('<small>&#9660;</small>'); 

// show its subnav when clicked 
$('#nav-bar ul li').click(function() { 
    var subnav = $(this).children('ul.subnav'); 
    // hide the other's subnav if it's visible 
    if ($(this).attr('id') == 'location') { 
    subnav.toggle(); 
    $('li#feedback').children('ul.subnav').hide(); 
    } else { 
    subnav.toggle(); 
    $('li#location').children('ul.subnav').hide(); 
    } 
}); 

JS와 jQuery를에 초보자, 내가 노력하고있어 달성하기 위해 덜 자세한 방법이 있는지 알고 싶습니다 위.

편집 : 더 나은 질문은 명시 적으로 li의 ID를 부여하지 않고이 작업을 수행 할 수있는 방법이 있습니까?

<ul id="nav-bar"> 
    <li><a href="#">A link</a> |</li> 
    <li> 
    <a href="#">Feedback</a> | 
    <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Another link</a> |</li> 
    <li> 
    <a href="#">Pick your location</a> | 
    <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
    </ul> 
    </li> 
</ul> 

그런 다음 jQuery 코드는 다음과 같이 보일 것이다 :

Answer 1

더 나은 형식은 HTML이 같은 것

$(function(){ 
    var $nav = $("#nav-bar"), 
     $subnav = $nav.find("ul.subnav").hide(); 

    $nav.children('li:has(ul.subnav)').click(function(e){ 
    e.preventDefault(); 
    var $sub = $(this).children('ul.subnav').toggle(); 
    $subnav.not($sub).hide(); 
    }) 
}) 

Answer 2

글쎄, 당신이 만들 수있는 몇 가지 방법이 있습니다 그것은 당신의 코드를 유지하기가 조금 더 쉽다. 여기에 빠른 예제 :

//hide the subnavs and give them a little down arrow 
$('ul.subnav').hide().parent().append('<small>&#9660;</small>'); 

// show its subnav when clicked 
$('#nav-bar ul li').click(function() { 
    var subnav = $(this).children('ul.subnav'); 
    // hide the other's subnav if it's visible 

$('ul.subnav').hide(); 
subnav.toggle(); 
}); 

기본적으로이 다시 'subnav'의 모든 요소를 ​​다시 숨 깁니다, 다음에 클릭 된 하나를 보여줍니다. 하지만 주요 차이점은 이제 세 번째, 네 번째, 네 번째 등의 드롭 다운 메뉴를 추가하거나 자바 스크립트를 변경하지 않고 ID를 변경할 수 있다는 것입니다.

사용중인 HTML이 "표준"탐색 메뉴와 매우 비슷하고 비슷하게 보입니다.

편집 : 이전 대답 분명히 유사하다 : P 나는 그것이 불필요한의 인라인 javascript:void(0) 코드를 제거하는 것

Answer 3

. 링크를 "#"에 연결하십시오.

ID와 일치하고 싶지는 않을 것입니다. 크기가 잘 맞지 않습니다. 대신,이 같은 뭔가 (테스트되지 않은) 작업을해야합니다

$('#nav-bar ul li').click(function() {  
    $(this) 
    //hide all subnavs 
    .closest("#nav-bar").find("ul.subnav").hide().end().end() 
    //show subnav under the li clicked 
    .find("ul.subnav").show();  
}); 

는 가능하면 chain your jquery 코드에 원하는 새 요소를 DOM을 각 시간을 잡아하지 않아도됩니다. 이해할 수있는 한, 새로운 요소를 가져 오는 대신 이미 발견 된 요소를 탐색 할 때 체인을 연결하는 것이 더 효율적입니다.

.end()는 체인을 이전에 발견 된 요소로 되돌려 놓습니다. 따라서 .closest ("blah")라고 말하면 find ("blah2")입니다. .end(). end()를 사용하면 원래 항목 (this)으로 되돌아 가서 그 밑에있는 특정 서브 탐색을 찾을 수 있습니다.