CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menu
Zackskeeter
Zackskeeter

Reputation: 609

Twitter Bootstrap multiple dropdowns on click - jQuery assistance

I need a little assistance in modifying the javascript that controlls bootstrap dropdowns.

What i need to happen is when you click on a dropdown, it shows. On the top level that works fine, but if i want to go into a dropdown within a drop down Example:

<ul>
    <li>Dropdown 1
        <ul>
            <li>Dropdown 2
                <ul>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

When i click on dropdown 1, I can see the list item called dropdown 2 but when i click on it, it closes the whole list item again. When you click on dropdown 2 i need it to show up. I found a hover method to open the second nested dropdown but i need it to show on click.

And help is much appreciated. Here is a fiddle: http://jsfiddle.net/raDUC/1/

Upvotes: 1

Views: 1942

Answers (1)

Eric Uldall
Eric Uldall

Reputation: 2391

try this:

HTML:

<div class="navbar navbar-fixed-top span2">
  <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>  <a class="brand" href="#">Project Name</a>

    <div class="nav-collapse">
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>

                <ul class="dropdown-menu">
                    <li class="dropdown dropdown-nested"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>

                        <ul class="dropdown-menu">
                            <li>Living and Nonliving things</li>
                        </ul>
                    </li>
                    <li> <a href="#">Another action</a>

                    </li>
                </ul>
            </li>
            <li> <a href="#">Link</a>

            </li>
            <li> <a href="#">Link</a>

            </li>
            <li> <a href="#">Link</a>

            </li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

                <ul class="dropdown-menu">
                    <li> <a href="#">Action</a>

                    </li>
                    <li> <a href="#">Another action</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

JS:

$(function(){
  $('.dropdown-nested').click(function(event){
      event.stopPropagation();
      var dropdown = $(this).children('.dropdown-menu');
      dropdown.toggle();
  });
});

Side Note... I recommend adding the following css to your nav menus in bootstrap:

ul.nav a {
    outline: none;
}

it keeps that ugly blue outline from showing up if you click on a main menu item to close it.

Upvotes: 2

Related Questions