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.

  1. root collapsed start. if click on root should show children (works code above) , if click root again should hide children (works too)
  2. 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

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -