javascript - 停止传播

Question

我有一个面板，通过单击带有 class 的元素来打开和关闭以显示菜单.open。当我第一次单击它时，很好，面板打开了。面板打开后，我单击一个菜单项，然后面板关闭。

我面临的问题是，单击菜单项后关闭面板后，我需要点击两次.open才能再次打开面板。

我首先运行这个：

$(".open").toggle(function(){
   $(".header").animate({height:"100%"},200);
   },function(){
        $(".header").animate({height:50},200);
});

这会打开一个带有菜单的面板，然后当我单击一个菜单项时，我会这样做：

$(".navMore li a").on("click", function(e) {
   e.preventDefault();
    ...

是传播的问题吗？添加：

$(".navMore li a").on("click", function(e) {
   e.preventDefault();
   e.stopPropagation();

仍然给我留下同样的问题。

Answer 1

该click事件在 JQuery 中冒泡。为了防止这种情况发生，您需要停止传播在较低元素上冒泡并阻止较高元素的处理程序触发。

在$('.open')函数中，您需要输入以下内容：

$(".open").toggle( function( event ) {
    if( !$( event.target ).is("a") )
        {
            $(".header").animate({height:"100%"},200);
        }
},....);