单击屏幕内其他任何位置时，使引导下拉箭头更改方向答案

【问题标题】：Make the bootstrap dropdown arrow change direction on click anywhere else inside the screen单击屏幕内其他任何位置时，使引导下拉箭头更改方向
【发布时间】：2016-03-02 10:25:28
【问题描述】：

在以下示例Code Ply 中，我可以使下拉菜单中的箭头在单击按钮时消失（显示下拉项目）并在再次单击按钮时出现（隐藏下拉项目），但是当我单击其他任何地方，下拉项被隐藏，但箭头不出现，直到我再次单击按钮，然后箭头才出现。

如何根据下拉项的显示或隐藏来触发javascript函数是否出现或消失？

非常感谢您的回答。

谢谢。

【问题讨论】：

所以，如果我理解正确，您希望在打开下拉菜单时箭头朝上？
您好，我已经可以在显示下拉菜单时使箭头朝上，在隐藏下拉菜单时使箭头朝下。（我不确定为什么它没有在代码层上正确显示，它只显示隐藏或显示）。我现在不能做的是，只有当我点击按钮本身时，下拉菜单才会改变，但当我点击屏幕上的任何地方时不会改变（当我这样做时下拉菜单也会隐藏）

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

您可以使用引导下拉列表的.open 类而不是手动设置caret-up 类（在检查器中检查它，单击下拉列表，您应该会看到更改）并根据该设置设置箭头的样式

看起来有点像

.dropdown.open .caret
{
    //dropdown is open
}

.dropdown:not(.open) .caret
{
    //dropdown is not open
}

不需要自己的css

【讨论】：

【解决方案2】：

尝试在代码 sn-p 下添加此代码。检测在下拉列表之外的任意位置单击，如果span 没有class caret，则添加它。

$(document).click(function() {
   if(!$(".dropdown").find('span').hasClass("caret"));
        $('span', this).toggleClass("caret caret-up");
});

【讨论】：