点击事件自动执行

Question

我有这个代码

$(".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 会向下滑动，但它会立即再次向上滑动，打开的 class 会被删除，只需单击 1 次，那么如何解决这个问题以及使其正常作为小屏幕的下拉菜单单击打开并再次单击关闭

Answer 1

放

e.stopPropagation();

两者都

Answer 2

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

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

导致调用委托回调。您应该在动画结束时分配 class 并确保您不会再次调用 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
    });
});

点击事件自动执行

Click Event is executed automatically

css

jquery

menu

submenu

drop-down-menu