angularjs - dropdown of Navbar is double-clicked. -


the used version following.
・angularjs 1.2.16
・bootstrap3.1.1
・angularui bootstratp 0.11.0

var myapp = angular.module('app', ['ngroute', 'ui.bootstrap']);  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu</a>   <ul class="dropdown-menu" role="menu" aria-labelledby="usermenu">     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">one</a></li>     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">two</a></li>     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">three</a></li>   </ul> </li> 

if carries out, click needed dropdown of navbar twice. (unless double-clicks menu, one, two, , 3 not displayed. )

then, when lowering version of script used, able use satisfactorily.
・3.1.0 bootstrap.min.js
・0.10.0 ui-bootstrap-tpls.min.js

i want teach how if carries out, can display 1 click.

the short answer:

you should not using bootstrap.js angular-ui-bootstrap.js library. both libraries working display/hide dropdown on click event.

the long answer:

the dropdown-menu class sets display attribute none. boostrap.js library attaches click event elements data-toggle="dropdown" attribute. click event checks see if parent element has open class. if open class exists, remove it, otherwise add open class. 'open' class sets css display attribute block on child elements class of dropdown-menu overriding original value of none.

the angular-ui-bootstrap.js library adding/remove open class on toggle click event in same manner. 1 library adds open class, other library promptly removes it, resulting in original css display attribute of none in dropdown-menu class.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -