Javascript 在切换上旋转引导下拉插入符号，并防止在内部单击时关闭

我有下面的代码片段，它在

下拉开关上旋转
。插入符号
。这会毫无疑问地旋转
.caret
，但也会旋转页面上的所有其他
.caret
。我是否需要为页面上的每个
.caret
和
.dropdown toggle
编写一个单击功能，或者我是否可以拥有一个独立工作的功能

另外，是否有一种方法可以在单击
下拉菜单中的项目时停止关闭该菜单


$（文档）.ready（函数（）{
$（“.dropdown toggle”）。单击（函数（）{
$（“.caret”）.toggleClass（'rotate-180'）；
});
});
ul{
列表样式：无；
}
插入符号{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.旋转-180{
变换：旋转（-180度）；
}
























请参见下文，它可以正常工作

编辑：

我更新了我的答案，选择了一种更好的方法来覆盖所有场景，对于您在OP中提出的关于防止菜单关闭的最后一个问题，可以通过两种方式完成

将
单击
事件绑定到
下拉列表
，如果该事件已打开，则防止传播

您必须删除
data toggle=“dropdown”
属性，并自行实现菜单的打开和关闭。但我认为这需要比代码片段中使用的代码行更多的代码行


$（文档）.ready（函数（）{
$（'.dropdown'）.on（'hidden.bs.dropdown'，函数（e）{
$（this.find（'.caret'）.toggleClass（'rotate-180'）；
});
$（'.dropdown'）.on（'show.bs.dropdown'，函数（e）{
$（this.find（'.caret'）.toggleClass（'rotate-180'）；
});
//这是为了避免在菜单内单击时关闭菜单
$（'body'）。在（“单击“，”。下拉菜单），函数（e）{
$（this）.parent（）是（“.open”）和&e.stopPropagation（）；
});
});
ul{
列表样式：无；
}
插入符号{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.旋转-180{
变换：旋转（-180度）；
}
























试试这个


$（文档）.ready（函数（）{
$（“.dropdown toggle”）。单击（函数（）{
$（this）.children（“.caret”）.toggleClass（'rotate-180'）；
});  
});
$（文档）。在（“单击”）上，函数（事件）{
变量$trigger=$（“.caret”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“.caret”）.removeClass（'rotate-180'）；
}            
});
ul{
列表样式：无；
}
插入符号{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.旋转-180{
变换：旋转（-180度）；
}
























试试这个

    $(document).ready(function () { 
   $( ".dropdown-toggle" ).click( function() {
       $(this).children(".caret").toggleClass('rotate-180');
     });
    $( ".dropdown-menu" ).click( function() {
       $(this).siblings().children(".caret").toggleClass('rotate-180');
     });
   $(document).click(function(e){
      if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
         $(".caret").removeClass('rotate-180');
      }
    })
 });


$（文档）.ready（函数（）{
$（“.dropdown toggle”）。单击（函数（）{
$（this）.children（“.caret”）.toggleClass（'rotate-180'）；
});
$（“.dropdown menu”）。单击（函数（）{
$（this.sides（）.children（.caret”）.toggleClass（'rotate-180'）；
});
$（文档）。单击（函数（e）{
如果（！e.target.closest（“ul”）和&$（“.caret”）.hasClass（“旋转-180”））{
$（“.caret”）.removeClass（'rotate-180'）；
}
})
});
ul{
列表样式：无；
}
插入符号{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.旋转-180{
变换：旋转（-180度）；
}
























在bootstrap+v4中，只需添加样式：


。下拉切换[aria expanded=“true”]：之后{
变换：旋转（180度）；
}
/*对于动画*/
.下拉切换：在{
过渡：0.7s；
}



在bootstrap 3中，每当您单击下拉菜单时
.open>a>.caret{
  transform: rotate(180deg);
  transition: all ease-out 0.4s;
 }