क्या ड्रॉपडाउन

Question

में ड्रॉपडाउन तीर ऊपर और नीचे बदलना संभव है ड्रॉपडाउन मेनू पर क्लिक करते समय बूटस्ट्रैप ड्रॉपडाउन तीर को ऊपर और नीचे कैसे बदलें। क्या यह सीएसएस का उपयोग कर संभव है?

<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

इस सीएसएस जोड़ें:

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

यह अपने अवधि का चयन करेंगे जब सूची यानी खोला जाता है (जो मूल रूप से अपने तीर ओर इशारा करते हुए या नीचे है)। जब इसमें कक्षा .open होती है। फिर यह स्पैन सीएसएस परिभाषा को बदल देगा और तीर को बदल देगा।

आउटपुट:

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

कोड नीचे नीचे जोड़े की आप शैली सीएसएस। और अगर यह काम करता है या नहीं तो मुझे बताएं।

.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