javascript - 停止传播

Question

我有一个面板，可以通过单击类 .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);
        }
},....);