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;
}

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

<强>输出：

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

<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>

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

2 个答案: