bootstrap - 在特定菜单项打开下拉菜单和子菜单答案

【问题标题】：bootstrap - open drop down menu and submenu at specific menu itembootstrap - 在特定菜单项打开下拉菜单和子菜单
【发布时间】：2016-03-16 06:54:09
【问题描述】：

我使用了下拉菜单和下拉子菜单（只有 2 个级别），用户可以单击下拉子菜单并选择他们想要的项目。

例子：

1.1 级
- 1.2.1 级
- 1.2.2 级
- 1.2.3 级（用户点击这里）
1.2 级

然后我存储用户单击的子菜单项 ID (1.2.3) 并在下拉菜单之外添加一个按钮，然后当用户单击此按钮时，根据子菜单项 ID 下拉和子下拉将开放。

现在我只能通过以下方式打开 1 级菜单

$("#menu1").dropdown('toggle');

但不知道如何打开子下拉菜单。

这是我使用的示例：http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

但我只想使用 2 级下拉菜单项。

【问题讨论】：

给我们看代码！ HTML 和 jQuery。考虑一个 jsFiddle？
我已添加示例，谢谢。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

试试这个。

$document.ready(function() { 
    $('.dropdown').hover(function() {
        $(this)  // triggered on hover
            .children('.sub-menu')
            .slidedown(200);
        },
        function() {
            $(this) // triggered on hover end
                .children('.sub-menu')
                .slideup(200);
        }
    });
});

【讨论】：

我可以假设 op 想要一个可以在多个设备上运行的解决方案 #bootstrap .hover 在触摸设备上不起作用
@RamachandraReddy 您提供的链接将在一段时间内失效。最好把代码贴出来。这将对每个人都有用。如果您需要为网页添加好处，请添加链接作为参考。在答案中编辑它，而不是在评论中添加它。

【解决方案2】：

我自己解决了这个问题。您需要知道的是子菜单的 ID 和重要的类“open” - 没有此子菜单将无法以编程方式打开。

在按钮中点击显示下拉菜单，你需要：

 $('#txt_rgb_red_change').click(function(e) {
     e.stopPropagation();
     $("#menu1").dropdown('toggle');

     ID_HANDLE_HERE // see below

 });

它将打开下拉菜单，但没有子菜单。当用户已经点击进入子下拉菜单项时（您可以使用

处理此事件

$(".dropdown-submenu").bind("mouseenter",function(){
    var id = $(this).attr('id');
    // get the id of drop-down menu item
});

这里是这个 id 的 HTML 示例：

<ul class="dropdown-menu scrollable-menu " role="menu" aria-labelledby="dropdownMenu" data-toggle="dropdown">
<li class="dropdown-submenu dropdown-toggle" id="sub_dropdown_1" data-toggle="dropdown"><a href="#">Band 1 - 50</a>
....
</li>
</ul>

这里是sub_dropdown_1，那么你可以像这样将类添加到ID_HANDLE_HERE，必须正确添加到<li>。

$("#sub_dropdown_1").parent("ul").parent("li").addClass('open')

【讨论】：