javascript - How to change the bootstrap caret pointing direction on click event -


i'm using 2.3.2 bootstrap

as can change position of caret icon when click menu button.

i need when click icon caret pointing , when click on item caret initial state.

how possible?

the nav code

<div id="navi">     <div class="container">       <nav>         <div class="navbar">           <div class="navbar-inner">             <div class="row">               <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>               </button>                <div class="span2">                 <a class="brand" href="#"></a>               </div>                <div class="span10">                 <div class="nav-collapse collapse">                   <div class="row">                     <div class="span8">                       <ul class="nav">                         <li class="dropdown">                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">lorem 3 opes<b class="caret"></b></i></a>                           <ul class="dropdown-menu">                             <li><a href="#">lorem</a></li>                             <li><a href="institucional.html">olosmpa</a></li>                             <li><a href="#">lorem 2 isum</a></li>                            </ul>                         </li>                          <li class="dropdown">                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">lorem mas<b class="caret"></b></a>                           <ul class="dropdown-menu">                             <li><a href="#">lorem</a></li>                             <li><a href="institucional.html">olosmpa</a></li>                             <li><a href="#">lorem 2 isum</a></li>                            </ul>                         </li>                          </ul>                      </div><!-- /span8 -->                      <div class="span2">                       <div>                         <form id="buscar-fixed" class="navbar-form form-search">                           <div class="input-append">                             <input class="inputbusqueda span2" type="text" placeholder="buscar..." />                             <button class="btn" type="button"><i class="icon-search icon-white"></i></button>                             </div>                         </form>                        </div>                     </div><!-- /span2 -->                   </div><!-- /row -->                 </div><!--/.nav-collapse -->               </div><!-- /span10 -->             </div><!-- /row -->           </div><!-- /nav-inner -->         </div><!-- /navbar -->       </nav>     </div><!-- /container -->   </div><!-- fin #nav-sup --> 

link fiddle try resolve

image example of problem

you can add this

.nav .dropdown.open .caret{     border-top: none;     border-bottom: 4px solid #000000; } 

updated fiddle


Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -