下拉菜單當我點擊一個鏈接

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美化，你對你的方式