Twitter bootstrap Bootstrap 3-单击链接时取消下拉菜单

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

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

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

---

非常感谢。

您可以添加一个单击列表以防止菜单关闭：

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

这样，当您单击“第一级选项”时，下拉列表将不会关闭。在这种情况下，如果要防止关闭，则即使对于二级项目，也可以使用

stopPropagation

---

请注意，您可以根据需要更改选择器。例如，

$（“#main menu>div>a”）

将在这种情况下为您提供相同的结果。

我或多或少有相同的问题，但我无法关闭上一条注释中设置的下拉子菜单和函数，它无法正常工作

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

当我下拉一个子菜单时，如何隐藏打开的子菜单

---

谢谢你能提供一把小提琴吗？

//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');
     });
    });