0

ボタンの操作方法に問題があります。クリックすると、ボタンにクラスが追加され、ドロップダウンが表示されます。その部分は問題ありません。誰かがクリックを非常に速くスパムすると、ボタンのクラスとドロップダウンが同期しなくなる可能性があります.

以下は私の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") 
        }
    });

ボタンクラスとドロップダウンが同期しているソリューションはありますか?

ありがとう。

4

2 に答える 2

0

変数を再利用してイベントに結び付けることで、なんとか修正できました。

やった

    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-16T07:34:48.940 に答える
0

クリック イベントをボタンに 2 回バインドしないでください。2 番目のブロックのコードを最初のブロックに入れます。そのように：

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-16T07:23:51.980 に答える