Javascript jQuery-在不使用stopImmediatePropagation（）的情况下切换菜单；

目前，当我取消注释

e.stopImmediatePropagation（）时，代码段只允许切换每个菜单

问题是我不能使用
e.stopImmediatePropagation（）
因为我必须在
按钮上使用一个动画，该动画将被stop终止

当使用
e.stopImmediatePropagation（）时，如何更改代码以切换菜单的功能，但不必使用它

模拟问题：单击苹果或谷歌徽标（或钟形图标），然后单击它
再一次。解决方案应将
.active
从其关联的
.modal
并且它应该像单击
文档
时一样关闭（钟形图标按钮除外，该按钮未设置为在单击文档时关闭）。我只是不知道如果不使用
e.stopImmediatePropagation（）如何实现这一点


$（“[数据关闭]”）。单击（函数（e）{
const dataClose=$（this.attr（“数据关闭”）；
常量元素=$（'[data id=“'+dataClose+'“]'）。长度？
$（“[data id=“”+dataClose+“]”]）：
$（数据关闭）；
如果（元素类（“活动”）和元素是（“可见”））{
元素移除类（“活动”）；
/*e.立即停止传播（）*/
}
});
$（“.button”）。在（“单击”，函数（）{
const id=$（this.prop（“id”）；
$（“.modal”）。每个（函数（）{
$（this）.toggleClass（“active”，$（this）.data（“id”）==id）；
});
});
$（文档）。在（“单击”）上，函数（e）{
如果(
$（“.apple modal，.google modal”）.hasClass（“活动”）&&
！$（“.modal、.modal*、.button”）.is（e.target）
) {
$（“.modal”）.removeClass（“活动”）；
}
});
。按钮{
显示器：flex；
对齐项目：居中；
}
.按钮{
高度：30px；
光标：指针；
边框：2倍实心；
填充：1rem；
字号：28px；
}
#图标{
颜色：银色；
}
.标题{
高度：15px；
背景：#eee；
}
.莫代尔{
位置：固定；
顶部：72px；
右：15px；
z指数：6；
不透明度：0；
可见性：隐藏；
变换：比例（0.5）；
变换原点：右上角；
过渡时间：0.15s；
盒影：0 1.5px 4px rgba（0,0,0,0.24），0 1.5px 6px rgba（0,0,0,0.12）；
}
.莫代尔：之后{
内容：“；
宽度：15px；
高度：15px；
背景：继承；
位置：绝对位置；
背景：#eee；
顶部：-6px；
右：8px；
不透明度：0；
可见性：隐藏；
变换：旋转（45度）比例（0.5）；
过渡时间：0.15s；
}
.modal.active{
不透明度：1；
能见度：可见；
变换：比例（1）；
}
.modal.active:之后{
不透明度：1；
能见度：可见；
变换：旋转（45度）比例（1）；
}

谷歌


首先

第二

第三

苹果


首先

第二

第三

偶像


首先

第二

第三

通过在单击按钮中添加关闭模式功能，并检查当前元素的模式是否可见，我可以实现您想要的功能：


$（.button”）。在（“单击”上，函数（）{
const dataClose=$（this.attr（“数据关闭”）；
常量元素=$（'[data id=“'+dataClose+'“]'）。长度
？$（“[data id=“”+dataClose+“]”号）
：$（数据关闭）；
如果（元素类（“活动”）和元素是（“可见”））{
元素移除类（“活动”）；
}否则{
const id=$（this.prop（“id”）；
$（“.modal”）。每个（函数（）{
$（this）.toggleClass（“active”，$（this）.data（“id”）==id）；
});
}
});
$（文档）。在（“单击”）上，函数（e）{
如果(
$（“.apple modal，.google modal”）.hasClass（“活动”）&&
！$（“.modal、.modal*、.button”）.is（e.target）
) {
$（“.modal”）.removeClass（“活动”）；
}
});
。按钮{
显示器：flex；
对齐项目：居中；
}
.按钮{
高度：30px；
光标：指针；
边框：2倍实心；
填充：1rem；
字号：28px；
}
#图标{
颜色：银色；
}
.标题{
高度：15px；
背景：#eee；
}
.莫代尔{
位置：固定；
顶部：72px；
右：15px；
z指数：6；
不透明度：0；
可见性：隐藏；
变换：比例（0.5）；
变换原点：右上角；
过渡时间：0.15s；
盒影：0 1.5px 4px rgba（0,0,0,0.24），0 1.5px 6px rgba（0,0,0,0.12）；
}
.莫代尔：之后{
内容：“；
宽度：15px；
高度：15px；
背景：继承；
位置：绝对位置；
背景：#eee；
顶部：-6px；
右：8px；
不透明度：0；
可见性：隐藏；
变换：旋转（45度）比例（0.5）；
过渡时间：0.15s；
}
.modal.active{
不透明度：1；
能见度：可见；
变换：比例（1）；
}
.modal.active:之后{
不透明度：1；
能见度：可见；
变换：旋转（45度）比例（1）；
}

谷歌


弗斯特


第二


第三


苹果


弗斯特


第二


第三


偶像


弗斯特


第二


第三


在Firefox和Chrome中，无论行是否被注释，为我切换都有效，而Safari则根本不起作用，无论行是否被注释。我无法重现您的问题。您是否尝试使用stopPropagation而不是StopImmediatePropagation？我已使用用例更新问题以模拟问题。解决方案无法使用StopRopagation，因为我在站点的按钮上有一个动画。是的，我现在可以看到问题。你说的每单击一次是什么意思，也许我遗漏了什么，我的实现是一个切换功能，这正是你使用
e.stopImmediatePropagation（）时所拥有的功能已启用。单击apple，然后单击