下拉菜单当我点击一个链接

Question

我有或多或少相同的问题，如在后“引导3 - 丢失下拉菜单，当我点击一个链接”，但我无法关闭下拉子菜单并且该函数在这篇文章中，它不能正常工作。

我希望当我点击一个子菜单这个下拉菜单，当我点击另一个打开的子菜单是关闭的，我点击打开，现在所有的子菜单都没有关闭，只有当你再次点击这个子菜单时，其他子菜单：

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

Answer 2

下面这个脚本的帮助：

  // Collapse accordion every time dropdown is shown 
     $('.dropdown-accordion').on('show.bs.dropdown', function (event) { 
      var accordion = $(this).find($(this).data('accordion')); 
      accordion.find('.panel-collapse.in').collapse('hide'); 
     }); 

     // Prevent dropdown to be closed when we click on an accordion link 
     $('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) { 
      event.preventDefault(); 
      event.stopPropagation(); 
      $($(this).data('parent')).find('.panel-collapse.in').collapse('hide'); 
      $($(this).attr('href')).collapse('show'); 
     }) 

这个CSS

 .panel-default>.panel-heading { 
      box-shadow: none; 
     } 

     .fake-panel-link{ 
      margin-top: 0; 
      margin-bottom: 0; 
      font-size: 16px; 
      color: #333; 
      padding-left: 15px; 
     } 

     .fake-panel-link a, .panel-body a { 
      color:inherit; 
     } 

     .panel-body { 
      background-color: #40B369; 
      color:#333; 
     } 

所有你所要做的只是窝在手风琴的落下。你原来有同样的思维过程。

这里是DEMO

该功能可以运行，所有你需要做的就是一些CSS美化，你对你的方式