点击事件自动执行答案

【问题标题】：Click Event is executed automatically点击事件自动执行
【发布时间】：2015-06-09 22:07:01
【问题描述】：

我有这个代码

$(".menu").on('click', function(e) {
    e.preventDefault();
    $(this).addClass("open").children("div").slideDown(200);
});

$(document).on('click', ".menu.open", function(e) {
    e.preventDefault();
    $(this).removeClass("open").children("div").slideUp(200);
});

当我单击.menu 时，内部 div 会向下滑动，但它会立即再次向上滑动，并且只需单击 1 次即可删除开放类，因此如何解决此问题并使其作为小屏幕的下拉菜单正常工作一次点击打开，另一次点击关闭

【问题讨论】：

你能把它放在一个 jsFiddle 里让我们试试吗？另外，在这一行中， $(this).addClass("open");.children("div").slideDown(200);第一个分号似乎不合适，你能仔细检查你的代码吗？
这只是一个打字错误，抱歉问题仍然存在
好的，没问题。仍然需要小提琴。我认为发生的事情是点击 .menu 也会触发点击 .menu.open，这就是为什么点击打开时会触发关闭操作。

标签： jquery css drop-down-menu menu submenu

【解决方案1】：

您在单击然后向下滑动时立即分配类open -

$(".menu").on('click',function(e){
    $(this).addClass("open").........slideDown(200);
});

这导致委托的回调被调用。您应该在动画结束时分配类，并确保您不再调用 open 菜单 -

$(".menu").on('click',function(e){
    var tthis = this; //saving the instance to refer in callback
    if ($(tthis).hasClass('open')){ //ignore if already open
         return;
    }
    $(tthis).children("div").slideDown(200, function(){
        $(tthis).addClass("open"); // add class at the end of the animation
    });
});

$(document).on('click',".menu.open",function(e){
    var tthis = this; //saving the instance to refer in callback
    $(tthis).children("div").slideUp(200, function(){
        $(tthis).removeClass("open"); // remove class at the end of the animation
    });
});

【讨论】：

【解决方案2】：

放

e.stopPropagation();

两者都有

【讨论】：

@Wally Altman 很好，但它仍然不是正确答案，我可能会删除
值得一试。 :)