Question

我使用了下拉菜单并下拉子菜单（只有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级下拉菜单项。

Answer 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);
        }
    });
});

Answer 2

我自己解决了这个问题。你需要知道的是子菜单的ID和重要的课程＆＃34; open＆＃34; - 没有此子菜单将无法以编程方式打开。

在单击以显示下拉菜单的按钮中，您需要：

 $('#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')

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

2 个答案: