2

I need to put a dropdown menu ... in a dropdown menu in Bootstrap 3. Here is what I tried : Demo.

enter image description here

Unfortunately, when I click on the the second dropdown, it is not displayed.

How can I display the second dropdown when clicking on it ? Then how (with JS or jQuery) could I handle the change of state of this 2nd dropdown?

HTML :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div>
            <ul class="nav navbar-nav">
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Edit</a>
                        </li>
                        <li><a href="#">Delete</a>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Visible by friends<span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Visible by friends</a>
                                </li>
                                <li><a href="#">Visible by me only</a>
                                </li>
                                <li><a href="#">Visible by anyone</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
creimers
  • 4,975
  • 4
  • 33
  • 55
Basj
  • 41,386
  • 99
  • 383
  • 673
  • *(I know that an answer could be : dropdown in a dropdown ? urrr, don't do that. But here I would like to study how to do it though).* – Basj Oct 10 '14 at 21:52
  • 1
    This might help you out: http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – xaisoft Oct 10 '14 at 21:56
  • Thanks @xaisoft, it is not far from my problem, but it is a little bit different. Here it is a submenu : http://www.bootply.com/86684 that is 1/ automatically displayed when hover 2/ is on the right... Instead of I would like : the submenu is displayed only on click + the submenu is displayed below, like a dropdown menu. – Basj Oct 10 '14 at 22:01

3 Answers3

3

Add the following javascript:

$('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
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');
});

Demo can be see here.

xaisoft
  • 3,343
  • 8
  • 44
  • 72
  • Thanks! It works, but then the result will be like "one big menu" : http://imgur.com/nRJqzJX... : we cannot distinguish the menu and the submenu. I would like to distinguish the menu and submenu, I don't see exactly how to do it... I would like such kind of submenu: http://imgur.com/7p0h2OM – Basj Oct 10 '14 at 22:17
1

You could try triggering the dropdown on the inner modal manually. See fiddle

Js:

$('.dropdown li').click(function (e) {
e.stopPropagation();
});
$('.dropdown-inner').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('open').trigger('shown.bs.dropdown');
});

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div>
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a>

                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Edit</a>
                    </li>
                    <li><a href="#">Delete</a>
                    </li>
                    <li class="dropdown-inner"> <a href="#" class="dropdown-toggle-inner">Visible by friends<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Visible by friends</a>
                            </li>
                            <li><a href="#">Visible by me only</a>
                            </li>
                            <li><a href="#">Visible by anyone</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

mark
  • 1,725
  • 1
  • 15
  • 14
  • The result will be like "one big menu" : http://imgur.com/nRJqzJX : we cannot distinguish the menu and the submenu. Any idea for solving this ? (see comment on other answer) – Basj Oct 10 '14 at 22:19
  • This can be solved using css, and customized to your specific purposes. See this [fiddle](http://jsfiddle.net/mmtx0zph/4/) for a general example. – mark Oct 11 '14 at 00:29
  • Thanks @mark! Here is how I would like to do (I use a "button" for the inside dropdown) : http://jsfiddle.net/mmtx0zph/6/ What JS should I add so that it's possible to open the inside button ? – Basj Oct 11 '14 at 13:02
  • I tried your code http://jsfiddle.net/mmtx0zph/7/ with `addClass('open')` but here it does not work... Any idea ? – Basj Oct 11 '14 at 13:08
  • 1
    The reason it doesn't work is because you're triggering the 'open' on the wrong element. Try this [fiddle](http://jsfiddle.net/mmtx0zph/8/) – mark Oct 11 '14 at 18:02
  • Thanks @mark! Here is now a working code, I posted on codereview.SE in order to see if I should improve the code : http://codereview.stackexchange.com/questions/66363/toggle-item-inside-a-bootstrap-dropdown-menu – Basj Oct 11 '14 at 20:15
0

checkout http://www.bootply.com/71520 maybe duplicated with Bootstrap 3 dropdown sub menu missing

Community
  • 1
  • 1
Peng
  • 94
  • 1
  • 8