Question

我的按钮操作方式有问题。如果单击它，则会向该按钮添加一个类，并显示一个下拉列表。那部分没问题。只是，如果有人发送点击，非常快，按钮类和下拉列表可能会失去同步 - 按钮没有类但是下拉列表已经出现，或者下拉列表没有出现且按钮有一个类。 / p>

以下是我的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") 
        }
    });

是否有人有按钮类和下拉列表保持同步的解决方案？

感谢。

Answer 1

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

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") 
    }
});

Answer 2

我确实设法修复它，重复使用变量来绑定事件。

我做了

    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") 
    }

看起来有点像一个奇怪的剧本，但它有效，所以我很高兴！

同步按钮类和下拉列表

2 个答案: