下拉菜单在......带有Bootstrap的下拉菜单中

Question

我需要在Bootstrap 3 的下拉菜单中输入一个下拉菜单....这是我尝试过的： Demo 。

不幸的是，当我点击第二个下拉列表时，它不会显示。

点击它时如何显示第二个下拉列表？ 那么如何（使用JS或jQuery）我可以处理第二次下拉列表的状态变化？

---

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

添加以下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');
});

演示可以在这里看到。

Answer 2

您可以尝试手动触发内部模态的下拉菜单。 看小提琴

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下拉子菜单缺失重复