È possibile modificare la freccia del menu a discesa su e giù nel bootstrap

Question

Come modificare la freccia del menu a discesa su e giù mentre si fa clic sul menu a discesa. E 'possibile usare 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

Aggiungere questo CSS:

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

Si selezionerà la durata della (che è fondamentalmente la freccia rivolta verso l'alto o verso il basso) quando la lista si apre cioè. quando contiene la classe .open. Quindi cambierà la definizione del css e girerà la freccia.

uscita:

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

Aggiungi al di sotto fondo il codice di voi di stile CSS. e fammi sapere se funziona o no.

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

Esempio su CodePen