jquery - 单击链接时的下拉菜单

Question

我或多或少遇到了与帖子“Bootstrap 3 - 当我点击链接时消失下拉菜单”一样的问题，但我无法关闭下拉子菜单，功能在这篇帖子中，它不能正常工作。

我希望当我点击一个子菜单时，这个下拉菜单当我点击另一个打开的子菜单时关闭，然后我点击打开，现在所有的子菜单都没有关闭，只有当你再次点击这个子菜单时 no when click en其他子菜单:

HTML 与这篇文章中发布的太相似了:

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
        <div id="MainMenu" class="dropdown-menu">
            <div class="list-group panel dropdown">
                <a href="#link1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Portals <i class="caret"></i></a>
                <div id="link1" class="collapse background-submenu">
                    <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 1 </a>
                    <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 2 </a>
                    <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 3 </a>
                    <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 4 </a>
                </div>
                <a href="#link2" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Calculators <i class="caret"></i></a>
                <div id="link2" class="collapse background-submenu"></div>
                <a href="#link3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Tools <i class="caret"></i></a>
                <div id="link3" class="collapse background-submenu">
                    <a href="#SubMenu3" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu3">Customer Credit OverView</a>
                </div>
            </div>
        </div>
    </li>
    <li><a id="btn-customersearch" ng-click="customerSearchClick();" href="#customerSearch"><img src="img/u2973_off.png" /></a></li>
    <li><a id="btn-customerhome" ng-click="homeClick();" href="#/"><img src="img/u2983_on.png" /></a></li>       
</ul>     

<ul class="nav navbar-nav navbar-right">
    <li class="navbar-manager">Sheldon Cooper</li>
    <li><a href="#"><img src="img/u2977.png" /></a></li>
    <li><a href="#"><img src="img/u2975.png" /></a></li>
    <li><a href="#"><img src="img/u2979.png" /></a></li>
    <li><a href="#"><img src="img/ico_closesession.png" /></a></li>
</ul>          
</div>

但是我有以下功能:

//Hide the menu when you click everywhere on the page - 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();     
        });
    //dropdown menu
        $(document).on("click", function() {
            $("#MainMenu>div>a").on('click', function(e){
            e.stopPropagation();
            var dest = $(this).attr('href');
            $(dest).collapse('toggle');
         });
        });

当我在下拉子菜单中隐藏打开的子菜单时，我该怎么做？

谢谢

http://i.stack.imgur.com/deulX.png http://i.stack.imgur.com/VV7c5.png http://i.stack.imgur.com/TACqp.png

Answer 1

如果我没有正确理解您的问题，您希望在单击(或打开)第二个子菜单时关闭一个子菜单。将您的 Js 更改为:

//Hide the menu when you click everywhere on the page - 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();
      });

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

           if ($('#MainMenu>div>a').not(this) && $('#MainMenu>div>a').next('div.in')) {
              $("#MainMenu>div>a").next('div').removeClass('in');
           }
       });
    });