Question

我有一个下拉菜单，但效果不好，

这是HTML代码：

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
        <div id="MainMenu" class="dropdown-menu">
          <div class="list-group panel">
            <a href="#demo3" class="dropdown-toggle list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Portals</a>
            <div class="collapse" id="demo3">
              <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 1 <i class="fa fa-caret-down"></i></a>
              <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 2 <i class="fa fa-caret-down"></i></a>
              <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 3 <i class="fa fa-caret-down"></i></a>
              <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 4 <i class="fa fa-caret-down"></i></a>
            </div>
            <a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Calculators</a>
            <div class="collapse" id="demo4">
              <a href="" class="list-group-item">Portal 1</a>
              <a href="" class="list-group-item">Portal 2</a>
              <a href="" class="list-group-item">Portal 3</a>
            </div>
             <a href="#demo5" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Tools</a>
            <div class="collapse" id="demo5">
              <a href="" class="list-group-item">Portal 1</a>
              <a href="" class="list-group-item">Portal 2</a>
              <a href="" class="list-group-item">Portal 3</a>
            </div>
          </div>
        </div>
    </li>   
</ul>

这是CSS代码：

#customer-information .list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px
}
#customer-information .list-group-submenu {
  margin-left:20px;
}

我需要点击一个选项，菜单不要消失，菜单应该只在执行时关闭点击图标显示菜单

非常感谢。

Answer 1

您可以添加点击列表器以防止菜单关闭：

$("[data-parent='#MainMenu']").on('click', function(e){
    e.stopPropagation();
    var dest = $(this).attr('href');
    $(dest).collapse('toggle');
});

这样，单击第一级选项时，下拉列表不会关闭。如果你想在这种情况下也阻止关闭，你甚至可以使用stopPropagation作为二级项目。

请注意，您可以根据需要更改选择器。例如，$("#MainMenu>div>a")在这种情况下会给你相同的结果。

Answer 2

我或多或少有同样的问题，但我无法关闭上一条评论中设置的下拉子菜单和功能，它无法正常使用。

HTML与此处已经存在的HTML相同，并具有以下功能：

//Ocultar menu cuando se haga click fuera del mismo
    $(document).on('click', function (e) {
    //$(document).on("click", "body", function(e) {
        //Target => collapse('hide')
       if($("#MainMenu").hasClass('in')) {
           $("#MainMenu").collapse("hide");
       }
       //stop the code from bubbling up
       e.stopPropagation();
       e.preventDefault();      
    });

    $(document).on("click", function() {
        $("#MainMenu>div>a").on('click', function(e){
        e.stopPropagation();
        var dest = $(this).attr('href');
        $(dest).collapse('toggle');
     });
    });

当我下拉一个子菜单隐藏一个打开的子菜单时，我怎么能这样做？

由于

Bootstrap 3 - 当我点击链接时，取消下拉菜单

2 个答案: