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

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

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 回答