Question

我或多或少有同样的问题，例如在帖子“Bootstrap 3 - 当我点击一个链接时丢弃下拉菜单”，但我无法关闭下拉子菜单，该功能在这篇文章中，它对我没有用。

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

HTML与本文中发布的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美化，你就在路上

单击链接时的下拉菜单

2 个答案: