부모 요소에서 클래스 제거

내가 원하는 것은 드롭 다운 div에서 열려있는 클래스를 제거하여 메뉴가 마우스를 올려 놓을 때 나타나지만 클릭 할 때 표시되지 않도록하지만 제거 할 수는 없습니다. 어쩌면 나는 이것이 어떻게 작동하는지 이해할 수 없다. 내가 아는 전부는 내가 mouseleave 기능까지 제대로 할 수 있었다는 것이다. 나는 부트 스트랩 3.부모 요소에서 클래스 제거

HTML

<div class="dropdown"> 
    <a data-toggle="dropdown" data-target="#" href="#" class="active"> Home <span class="main-text-color light">+</span> </a> 
    <ul class="dropdown-menu" role="menu"> 
     <li>home shop</li> 
     <li>home events</li> 
     <li>home paralax</li> 
     <li>home blog</li> 
     <li>home portfolio</li> 
     <li>home corporate : v1</li> 
     <li>home corporate : v2</li> 
     <li>home corporate : v3</li> 
     <li>home corporate : v4</li> 
     <li>home corporate : v5</li> 
     <li>home corporate : v6</li> 
     <li>create your own <i class="fa fa-play-circle-o"> </i> </li> 
    </ul> 
</div>

자바 스크립트를 사용하고

$('.dropdown').hover(function() { 
    $(this).addClass("open"); 
    $(this).children('.dropdown-menu').mouseleave(function() { 
     $(this).parent().removeClass("open"); 
    }); 
});

출처

2014-02-13 Szekely Jonathan

거의 관찰

(가)이 실행 얻을 것이다 전화를 올려 놓습니다 당신은 단지 하나의 함수 콜백을 가지고 있기 때문에

dropdown 이벤트의 mouseenter 및 mouseleave 이벤트에서
는

dropdown-menu

드롭 다운이 계속 표시됩니다 복수하는 MouseLeave 이벤트가 dropdown-menu 요소에 등록되는 원인이됩니다

나는이 할 것입니다 생각

$('.dropdown').hover(function() { 
    $(this).addClass("open"); 
}, function() { 
    $(this).removeClass("open"); 
});

데모 : Fiddle

출처

2014-02-13 11:16:24

부모 요소에서 클래스 제거

답변

관련 문제