Twitter's Bootstrap dropdowns with click event

Question

I'm using twitter bootstrap "dropdowns" not a "dropdown" multilevel menu with html markup.

   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                     <li><a tabindex="-1" href="#">Action</a></li>
                     <li><a tabindex="-1" href="#">Another action</a></li>

                 </ul>
              </li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
          </ul>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
          </ul>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>

I have a question. Can I add click event to show submenu?

possible duplicate of [Allow click on twitter bootstrap dropdown toggle link?](http://stackoverflow.com/questions/12630188/allow-click-on-twitter-bootstrap-dropdown-toggle-link) — balexandre, Jun 30 '13 at 07:14

Bass Jobsen · Answer 1 · 2013-06-30T09:47:30.050

5

The submenus are showed by css. So first disable the css (hover) and add a click event to your menu item.

html example:

<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
   <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
    </ul>
  </li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

disable css:

.dropdown-submenu:hover > .dropdown-menu {
  display: none;
}

trigger the click by javascript:

$('.dropdown-submenu').click(function(){
  $('.dropdown-submenu > .dropdown-menu').css('display','block');
  return false;
});

Example: http://bootply.com/66088

NOTE when you have more as one submenu give each its own class

edited Jun 30 '13 at 09:47

answered Jun 30 '13 at 09:28

Bass Jobsen

48,736
16
143
224

2

With the following modification to the JS, you can have multiple sub-menu's without giving each it's own class: `$('.dropdown-submenu').click(function(){$(this).children('.dropdown-menu').css('display','block'); return false;});` Example: http://bootply.com/79868 – Grinn Sep 09 '13 at 14:01
1

If you add this line to JS all the sub-submenus will close when you open sub-menu: $('.dropdown-toggle').click(function () {$(this).parent().children('.dropdown-menu').find('.dropdown-menu').css('display', 'none');}); – Bomberlt Sep 20 '13 at 07:46
I know this is an older question, but I also had a similar problem and I tried this solution. With slight tweaks everything worked except for if I looked at one menu, then went to another none of the links would work. I'll post a solution when I find one – Brian H Mar 07 '14 at 18:37
for hiding the opened sub-menu when clicking other sub-menu **check other solution** [here](http://www.bootply.com/97919), hope helps someone. – Shaiju T Apr 18 '16 at 11:34

Twitter's Bootstrap dropdowns with click event

1 Answers1

Linked