javascript - Prevent child element from collapsing with twitter bootstrap -
i have following list:
- root
- child1
- child2
the root should collapsible not children. following code both collapse if click on 1 of them. how can accomplish prevent children being collapsed?
<li data-toggle="collapse" data-target="#root"><a href="#">root</a> <ul class="nav nav-list collapse" id="root"> <li><a href="some_url">child1</a></li> <li><a href="some_url">child2</a></li> </ul> </li> edit: better approach describe want.
- root collapsed start. if click on root should show children (works code above) , if click root again should hide children (works too)
- once children displayed click on child. click trigger collapse , hides children again. (this i'm trying prevent)
jsfiddle: http://jsfiddle.net/mgcdu/4537/
move data-toggle , data-target attributes a element, like
<li><a href="#" data-toggle="collapse" data-target="#root">root</a> <ul class="nav nav-list collapse" id="root"> <li><a href="#">child1</a></li> <li><a href="#">child2</a></li> </ul> </li> having them in topmost li element makes element , children catch click events , trigger collapse. putting attributes child element limits scope of click events handling element (and children.)
Comments
Post a Comment