Collapsing multiple navbar bootstrap

Question

I have followed this example http://jsfiddle.net/rDN3P/98/ to create a collapsing navbar. It is working fine as long as I have one level in my menu. The collapsing seems not to work if I have multiple level of menu.

In this example, if you open the collapsible menu and click on the second 'dropdown2' item in the menu you will know what I mean.

This structure is the issue I assume

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">

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

                    <span class="caret"></span>
                </a>

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

          </li>

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Solved: jsfiddle

Based on this answer to add the third level menu with a little modification of the js code to close the third level menu on click:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 

    // Avoid having the menu to close when clicking
    event.stopPropagation(); 

// If a menu is already open we close it
if($(this).parent().hasClass('open')){
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
}else{
    // opening the one you clicked on
$(this).parent().addClass('open');

var menu = $(this).parent().find("ul");
var menupos = menu.offset();

if ((menupos.left + menu.width()) + 30 > $(window).width()) {
    var newpos = - menu.width();      
} else {
    var newpos = $(this).parent().width();
}
menu.css({ left:newpos });
}

});

edited May 23 '17 at 12:23

Community

1
1

answered Mar 09 '16 at 11:00

silviagreen

1,679
1
18
39

Would this solution work for just three levels or as many levels as it has? – mohsinali1317 Mar 09 '16 at 11:01
Honestly I do not know, but having more than three levels makes the menu quite unusable, especially in mobile, that's why in bootstrap 3 usually submenu do not work – silviagreen Mar 09 '16 at 11:03
let me try that. Its a client. Sometimes they just want some stuff.. ;) – mohsinali1317 Mar 09 '16 at 11:05
I understand the problem – silviagreen Mar 09 '16 at 11:07

score 0 · Answer 2 · answered Mar 09 '16 at 11:39

<li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#">
                Dropdown2
            </a>

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

      </li>

The nesting should be done properly I guess, with the correct classes.

Collapsing multiple navbar bootstrap

2 Answers2