Javascript 下拉菜单在。。。具有引导功能的下拉菜单

我需要放一个下拉菜单。。。在Bootstrap 3的下拉菜单中。以下是我尝试的内容：

不幸的是，当我点击第二个下拉列表时，它没有显示出来

单击第二个下拉列表时如何显示它？那么（使用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>

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

---

可以看到演示。

签出可能与重复使用

您可以尝试手动触发内部模式上的下拉菜单。看

Js:

HTML:

---

（我知道答案可能是：在下拉列表中下拉？乌尔，不要这样做。但我想在这里研究如何做）。这可能会帮助你：谢谢@xaisoft，这离我的问题不远，但有点不同。这是一个子菜单：当鼠标悬停2/位于右侧时，会自动显示该子菜单。。。而不是我想：子菜单仅在单击+时显示，子菜单显示在下面，类似于下拉菜单。谢谢！这是可行的，但结果就像“一个大菜单”：我们无法区分菜单和子菜单。我想区分菜单和子菜单，我不知道怎么做。。。我想这样的子菜单：结果会像“一个大菜单”：：我们无法区分菜单和子菜单。有解决这个问题的办法吗？（参见其他答案的评论）这可以通过css解决，并根据您的特定目的进行定制。请参见此了解一般示例。谢谢@mark！下面是我想做的事情（我使用一个“按钮”作为内部下拉列表）：我应该添加什么JS以便可以打开内部按钮？我用

addClass（'open'）

尝试了你的代码，但在这里它不起作用。。。知道吗？它不起作用的原因是你在错误的元素上触发了“打开”。试试这个

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

<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>