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 class。在下面的代码中，我们可以删除if检查并直接调用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);
   }
);

未经测试，但应该按照您的要求进行测试。

参考文献：

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

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

Answer 3

离开我的头顶，使用toggleClass()来优化班级切换

除了使用hover()替换mouseover＆amp; mouseout事件。

因此，您的代码将以这种方式结束：

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

JS小提琴链接：http://jsfiddle.net/g9zyd/4/

Answer 4

您可以使用jQuery库中的toggleClass方法，以及执行任务的一些小技巧！

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

尝试demo

简化下拉列表的js

4 个答案: