单击屏幕内任何其他位置的引导下拉箭头更改方向

Question

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

如果根据显示或隐藏的下拉项目显示或消失箭头，我该如何触发javascript功能？

你的回答非常感谢。

谢谢。

Answer 1

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

看起来有点像

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

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

不需要自己的css

Answer 2

尝试在下面添加以下代码段。 检测点击下拉菜单之外的任何位置，如果span没有class caret添加它。

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