同步按鈕類和下拉列表

我遇到了按鈕操作方式的問題。如果您點擊它，則會將一個課程添加到該按鈕並顯示下拉菜單。那部分很好。只是，如果有人點擊點擊，速度非常快，按鈕類和下拉菜單可能會失去同步效果 - 按鈕沒有任何課程，但下拉菜單已出現，或者下拉菜單沒有出現，並且按鈕有課程。同步按鈕類和下拉列表

以下是我的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

同步按鈕類和下拉列表

回答

相關問題