ブートストラップのドロップダウン矢印を上下に変更することは可能です

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を追加します。

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>

Answer 2

スタイルを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