2013-10-08 4 views
3

좋아요, 어제 제가 완전히 근원지가 아닌 것으로 판명 된 질문을했습니다. 나는 지금 더 견고한 입장에 있지만 여전히 문제가 있다고 생각합니다.jquery로 부트 스트랩 드롭 다운 메뉴를 닫는 방법?

<div class="btn-group" id="openItems"> 
    <button class="btn btn-custom-top dropdown-toggle" data-toggle="dropdown"><span class="caption"></span><span class="caret"></span></button> 
    <ul class="dropdown-menu" id="openItemDropdown"> 
    </ul> 
</div> 

메뉴에서 마우스를 이동 한 후, 나는 종료를하고자 다음과 같이 나는 버튼 그룹에 부트 스트랩 드롭 다운 메뉴가 있습니다. 나는 거의 그것을 작동하지만 꽤하지 않습니다.

$(document).ready(function() 
{ 
    $('.dropdown-menu').mouseleave(function() 
    { 

     $(".dropdown-toggle").dropdown('toggle'); 
    }); 
}); 

문제는 페이지의 모든 드롭 다운을 토글하는 것입니다. 나는 $(this).hasClass('active')을 검사하려고했지만 항상 false를 반환합니다. 나는 $(this)이 실제로 .dropdown-toggle 노드가 아닌 .dropdown-menu 노드이기 때문에 이것이 의심 스럽다. 그러나 노드를 탐색하는 것은 까다 롭고 모든 브라우저에서 작동하지 않는 것처럼 보입니다. 리스트를 닫는 것보다는 목록을 닫는 방법이 필요합니다.

답변

9

사용자 정의 가짜 클래스를 dropdown-toggle과 함께 추가하기 만하면됩니다. 예를 들면 :

<div class="btn-group" id="openItems"> 
    <button class="btn btn-custom-top myFakeClass dropdown-toggle" data-toggle="dropdown"> 
    <span class="caption"></span> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" id="openItemDropdown"></ul> 
</div> 

는 스크립트의 선택으로 그 사용

$j(".dropdown.open").toggle(); 

이 종료됩니다 :

$(document).ready(function() { 
    $('.dropdown-menu').mouseleave(function() { 
    $(".myFakeClass").dropdown('toggle'); 
    }); 
}); 
+0

매우 간단합니다! 내가 왜 그렇게 생각하지 않았어? 고맙습니다! – mrplainswalker

+0

이 사람들은 전설입니다. 세대에 대해 배울 대답을 남기는 사람. –

3

jQuery를 가진 부트 스트랩 드롭 다운을 닫으려면 더 쉬운 방법있다 모든 열려있는 드롭 다운. 사용자 지정 코드가없는

또는,

$j(".dropdown.open").removeClass("open"); 

이. 물론 btn-group의 경우처럼 불필요한 경우에도 .dropdown 클래스를 사용해야합니다.

관련 문제