수직 형 Navagation 형제가 다른 형제가 열렸을 때 닫히지 않았습니다.

Question

형제가 내린 형제 드롭 다운을 눌렀을 때 이전에 열렸던 드롭 다운을 눌러도 접히지 않습니다. 네가 날 도와 줄 수 있는지 궁금해서.

여기 내 자바 스크립트 코드이며 전체에서보고 싶다면 여기 jsfiddle 링크입니다 : 이미 합리적인 클래스 귀하의 요소를 준 이후이 작업이 매우 쉽습니다, http://jsfiddle.net/CLNBn/2/

$('.vertical-nav ul li:has("div")').find('div').hide(); 

$('.vertical-nav li:has("div")').find('span:first').click(function() { 
    $(this).parent('li').find('span:first').toggleClass("closed opened"); 
    if ($(this).parent('li').find('span:first').attr('class') == 'closed') { 
     $(this).parent('li').find('span:first').text('+'); 
    } else { 
     $(this).parent('li').find('span:first').text('-'); 
    } 
    $(this).parent('li').find('div:first').slideToggle(); 
}); 

Answer 1

. 당신이 원하는 것은 현재 li 엘리먼트의 형제 중 자식 인 클래스 opened을 가진 모든 span 엘리먼트를 찾아 click 이벤트 핸들러를 트리거하는 것입니다. , this 이미 의미

$('.vertical-nav li:has("div")').find('span:first').click(function() { 
    var $this = $(this); 
    $this.toggleClass("closed opened"); 
    if ($this.hasClass('closed')) { 
     $this.text('+'); 
    } else { 
     $this.text('-'); 
     $this.closest('li').siblings().children('span.opened').click(); 
    } 
    $this.closest('li').find('div').first().slideToggle(); 
});​ 

내 의견에 말했듯이 :

$(this).closest('li').siblings().children('span.opened').click(); 

DEMO

이 나는 ​​또한에 코드를 단순화하기 위해 자유를했다 :

이

을 수행 할 수 있습니다 span 요소에 추가하면 DOM 트리를 탐색하여 다시 검색 할 필요가 없습니다.