Javascript 按钮'；s事件不'；单击按钮'；s标题或按钮'；s图标

我创建了一个带有标签和“向下插入符号”图标的下拉按钮。当下拉菜单打开时，“向下插入符号”图标应该向上旋转，这是有效的

但如果我点击按钮标题或“向下插入符号”图标，此事件将不起作用

$（文档）.ready（函数（）{
$（'.dropdown'）。单击（函数（e）{
$（$（e.target）.find（'.down-caret'）.toggleClass（'open-caret'））；
e、 停止传播（）；
$（文档）。单击（函数（）{
$（'.dropdown menu'）.removeClass（'open'）；
$（'down-caret'）.removeClass（'open-caret'）；
});
});
});
a{
文字装饰：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.放下，放下{
背景色：#3498db；
颜色：#fff；
填充：1rem；
边界半径：6px；
位置：相对位置；
显示：内联块；
}
.向下插入符号{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：5px 5px 0 5px；
边框颜色：#ffffff透明；
显示：内联块；
左边距：6px；
顶部：-3px；
位置：相对位置；
变换：旋转（0度）；
过渡：所有0.25秒都容易进入；
}
.开放式插入符号{
变换：旋转（180度）；
过渡：所有0.25秒都放松；
}


我检查了你的小提琴代码，我刚刚删除了
，它工作正常。
我还更新了你的小提琴
只需要针对锚元素并稍微更改你的JS


$（文档）.ready（函数（）{
$（'a.drop'）。单击（函数（e）{
e、 预防默认值（）；
$（'.down-caret'，this）.toggleClass（'open-caret'）；
e、 停止传播（）；
$（文档）。单击（函数（）{
$（'.dropdown menu'）.removeClass（'open'）；
$（'down-caret'）.removeClass（'open-caret'）；
});
});
});
a{
文字装饰：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.放下，放下{
背景色：#3498db；
颜色：#fff；
填充：1rem；
边界半径：6px；
位置：相对位置；
显示：内联块；
}
.向下插入符号{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：5px 5px 0 5px；
边框颜色：#ffffff透明；
显示：内联块；
左边距：6px；
顶部：-3px；
位置：相对位置；
变换：旋转（0度）；
过渡：所有0.25秒都容易进入；
}
.开放式插入符号{
变换：旋转（180度）；
过渡：所有0.25秒都放松；
}


原因是，您正在使用当前单击的元素
$（e.target）
查找包含class
向下插入符号的元素

如果单击
图标
或
文本
，则指定类中没有元素

您只需将
$（e.target）
更改为
$（'.dropdown'）
，就完成了


$（文档）.ready（函数（）{
$（'.dropdown'）。单击（函数（e）{
$（'.dropdown'）.find（'.dropdown插入符号'）.toggleClass（'open-caret'）；
});
});
a{
文字装饰：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.放下，放下{
背景色：#3498db；
颜色：#fff；
填充：1rem；
边界半径：6px；
位置：相对位置；
显示：内联块；
}
.向下插入符号{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：5px 5px 0 5px；
边框颜色：#ffffff透明；
显示：内联块；
左边距：6px；
顶部：-3px；
位置：相对位置；
变换：旋转（0度）；
过渡：所有0.25秒都容易进入；
}
.开放式插入符号{
变换：旋转（180度）；
过渡：所有0.25秒都放松；
}


您所要做的就是在CSS中添加此类，代码将按照您的要求工作：

.drop{
  position:relative;
  z-index: -1;
}

是小提琴支撑着它

希望这有帮助。
与其使用target查找“向下插入符号”图标，不如直接使用“向下图标”

将
$（e.target）.find（'.down caret'）
更改为
$（'.down caret'）
我注意到需要标记。谢谢，但我一直希望在单击空格后，向下插入符号再次向下旋转。这里的问题已经解决了，但我找不到这个链接和我共享的链接之间的任何区别。javascript-第3行更改为：$（$（'.dropdown'）.find（'.down-caret'）.toggleClass（'open-caret'）；