Упрощение js для выпадающего списка

Question

У меня есть довольно простой код кода html для выпадающего списка, как можно видеть here он работает, но есть ли способ упростить этот код js?

$(document).ready(function() { 

    var n = ".dropdown-menu", no = 'drop'; 

    $('.dropdown').click(function() {    
    if($(n).hasClass(no)) {      
     $(n).removeClass(no);      
    } else { 
     $(n).addClass(no);       
    } 
    }).mouseover(function() {   
     $(n).addClass(no);       
    }).mouseout(function() {       
     if($(n).mouseover()){   
      $(n).removeClass(no); 
     }   
    }) 


}); 

Обратите внимание, что я знаю, что я могу пойти CSS только, добавив одну строку .. так что это не вопрос.

#navigation-top #navigation-holder li:hover > ul { 
    display: block; 
} 

Answer 1

Мы можем использовать toggleClass вместо класса add/remove. В коде ниже мы можем удалить, если проверить и непосредственно вызывать removeClass

if ($(n).mouseover()) { 
    $(n).removeClass(no); 
} 

Таким образом, окончательный оптимизированный код так:

$('.dropdown').click(function() { 
    $(n).toggleClass(no); 
}).mouseover(function() { 
    $(n).addClass(no); 
}).mouseout(function() { 
    $(n).removeClass(no); 
}) 

Fiddle Demo

Answer 2

$('.dropdown').click(function() {    
    $(n).toggleClass(no); 
}).hover(
    function() { 
     $(n).addClass(no); 
    }, function() { 
     $(n).removeClass(no); 
    } 
); 

Не тестировался, но это должен делать то, что вы ищете.

Refs:

https://api.jquery.com/toggleClass/

https://api.jquery.com/hover/

Answer 3

Off верхней части моей головы, использовать toggleClass() для оптимизации класса коммутации

Как также использование hover() заменить MouseOver & MouseOut Мероприятия.

Поэтому ваш код получится так:

$('.dropdown').click(function() { 
    $(n).toggleClass(no); 
}).hover(
function() { 
    $(n).addClass(no); 
} 
,function() { 
     $(n).removeClass(no); 
} 
); 

JS скрипка Ссылки: http://jsfiddle.net/g9zyd/4/

Answer 4

Вы можете использовать метод toggleClass из библиотеки JQuery, и какая-нибудь хитрость, чтобы сделать вашу задачу!

function rp(el){ 
    $(n).toggleClass(no, el.data); 
} 
var n = ".dropdown-menu", 
    no = 'drop'; 
$('.dropdown').click(rp).mouseover(true, rp).mouseout(false, rp); 

Попробуйте demo