Удаление класса из родительского элемента

Question

Что я хочу сделать, это удалить открытый класс из раскрывающегося списка, чтобы меню отображалось при наведении курсора, а не на щелчке, но я просто не могу его удалить. Может быть, я не понимаю, как это работает. Все, что я знаю, это то, что мне удалось сделать это прямо до функции mouseleave. Я использую Bootstrap 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> 

Javascript

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

Answer 1

Несколько наблюдений

• Поскольку у вас есть только одна функция обратного вызова для парения называют это будут выполнены на событие mouseenter и mouseleave события dropdown
• Это несколько событий MouseLeave регистрируется на dropdown-menu элемент
• Ваш код не будет удалить открытый класс, если пользователь не вошел в dropdown-menu элемент вместо переехал из выпадающего списка, не входя в dropdown-menu раскрывающийся будет оставаться видимым

Я думаю, что это будет делать

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

Демо: Fiddle