Dropdown menu in … a dropdown menu with Bootstrap

Question

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

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>

Answer 1

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 .

Answer 2

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>

Answer 3

checkout http://www.bootply.com/71520可能与Bootstrap 3下拉子菜单缺失重复