Điều này có thể thay đổi mũi tên thả xuống lên xuống trong bootstrap

Question

Cách thay đổi mũi tên thả xuống của bootstrap lên và xuống trong khi nhấp vào trình đơn thả xuống. Điều này có thể sử dụng css không?

<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

Thêm CSS này:

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

Nó sẽ chọn khoảng thời gian của bạn (mà về cơ bản là mũi tên hướng lên hoặc xuống) khi danh sách được mở ra tức. khi nó có chứa lớp .open. Sau đó, nó sẽ thay đổi định nghĩa css kéo dài và biến mũi tên.

Output:

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

Thêm mã dưới đây dưới cùng của bạn css phong cách. và cho tôi biết nếu nó hoạt động hay không.

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

Ví dụ trên CodePen