这是否可以在bootstrap中上下改变下拉箭头

Question

如何在单击下拉菜单时上下改变引导下拉箭头.这有可能使用CSS吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<li class="dropdown">
  <a href="#" style="text-decoration:none" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
      </ul>
</li>

Answer 1

在下面添加代码底部的css样式.并让我知道它是否有效.

.dropdown.open .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-top: 0px solid transparent;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

CodePen上的示例

Answer 2

添加这个CSS：

li.open > a > span{
   border-top: 0px !important;
   border-bottom: 4px dashed !important;
}

当列表打开时，它将选择您的跨度（基本上是向上或向下的箭头）。当它包含 class 时.open。然后它将更改 spans css 定义并转动箭头。

输出：

li.open > a > span{
   border-top: 0px !important;
   border-bottom: 4px dashed !important;
}

li.open > a > span {
  border-top: 0px !important;
  border-bottom: 4px dashed !important;
}