同步按钮类和下拉列表

我遇到了按钮操作方式的问题。如果您点击它，则会将一个课程添加到该按钮并显示下拉菜单。那部分很好。只是，如果有人点击点击，速度非常快，按钮类和下拉菜单可能会失去同步效果 - 按钮没有任何课程，但下拉菜单已出现，或者下拉菜单没有出现，并且按钮有课程。同步按钮类和下拉列表

以下是我的HTML

   <ul> 
       <li><a class="drop" tabindex="1"></a> 
        <ul class="dropdown"> 
         <li></li> 
         <li></li> 
        </ul> 
       </li> 
      </ul>

以下是我的CSS

.dropdown { 
    display: none; 
}

以下是我的jQuery

jQuery(".drop").click(function(event) { 

     // Variables 
     var theDrop = jQuery(this).next("ul.dropdown"); 
     theDropState = theDrop.is(':visible'); 
     // Slide Mechanism 
     jQuery("ul.dropdown").stop().slideUp(200); 
     if(!theDropState){ 
      theDrop.stop().animate({ height: 'show', opacity: 'show' }, '600') 
     } 
    }); 

    jQuery(".drop").click(function() { 
     theClickState = jQuery(this).hasClass("open") 
     jQuery(".drop").removeClass("open"); 
     if(theClickState){ 
       jQuery(this).removeClass("open") 
     } 
     if(!theClickState){ 
      jQuery(this).addClass("open") 
     } 
    });

没有任何人有一个解决方案，其中按钮类和下拉菜单保持同步？

谢谢。

来源

2012-08-16 user1032775

不要将点击事件绑定两次到按钮。将第二个块的代码放在第一个块中。像这样：

jQuery(".drop").click(function(event) { 
    // Variables 
    var theDrop = jQuery(this).next("ul.dropdown"); 
    theDropState = theDrop.is(':visible'); 
    // Slide Mechanism 
    jQuery("ul.dropdown").stop().slideUp(200); 
    if(!theDropState){ 
     theDrop.stop().animate({ height: 'show', opacity: 'show' }, '600') 
    } 
    //the second block 
    theClickState = jQuery(this).hasClass("open") 
    jQuery(".drop").removeClass("open"); 
    if(theClickState){ 
      jQuery(this).removeClass("open") 
    } 
    if(!theClickState){ 
     jQuery(this).addClass("open") 
    } 
});

来源

2012-08-16 07:23:51 Dirk

嗨，谢谢你的回应。使用这种方法它效果更好，但我仍然能够通过点击足够速度来打破它（尽管这很难）。 – user1032775 2012-08-16 07:32:04

我确实设法解决它，通过重用变量来绑定事件。

我做

if(theClickState){ 
     jQuery(this).removeClass("open") 
    } 

    else if(!theDropState){ 
     jQuery(this).addClass("open") 
    }

而不是

if(theClickState){ 
     jQuery(this).removeClass("open") 
    } 
    if(!theClickState){ 
     jQuery(this).addClass("open") 
    }

似乎有点怪异的剧本，但它的作品，所以我快乐！

来源

2012-08-16 07:34:48 user1032775

同步按钮类和下拉列表

回答

相关问题