单击另一个菜单时关闭菜单

Question

我有一个菜单，当用户在那个页面上时它是打开的。因此，当用户单击另一个菜单时，打开的菜单需要关闭并打开另一个菜单。到目前为止，我只设法让菜单在单击时打开。我无法关闭其他打开的菜单。

我的HTML

<div class="col-lg-4 col-md-4">
    <div class="second_menu">
        <div id="second-menu" class="collapse navbar-collapse menu_two">
            <ul class="nav navbar-nav inside-nav">
                <li class="active_sub_menu">
                    <a href="javascript:void(0);">Menu 1</a>
                    <ul class="sidenav_wrapper">
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 1</a>
                        </li>
                    </ul>
                </li>
                <li class="sub_menu">
                    <a href="javascript:void(0);">Menu 2</a>
                    <ul class="sidenav_wrapper" style="display: none;">
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 2</a>
                        </li>
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 3</a>
                        </li>
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 4</a>
                        </li>
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 5</a>
                        </li>
                    </ul>
                </li>
                <li class="sub_menu">
                    <a href="javascript:void(0);">Menu 3</a>
                    <ul class="sidenav_wrapper" style="display: none">
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 6</a>
                        </li>
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 7</a>
                        </li>
                        <li class="sidenav_item">
                            <a href="javascript:void(0);">Sub menu 8</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

我的CSS

.active_sub_menu .sidenav_wrapper {
    display: block;
}

我的JS

$( ".sidenav_active" ).parent().css({"display":"block"});

$('ul.navbar-nav li').click(function(){
    $(this).find('.sidenav_wrapper:first').toggle();
});

我的 jsfiddle：JSFIDDLE

Answer 1

隐藏 :visible 元素，然后显示当前单击的菜单。

$('.sidenav_wrapper:visible').not($(this).find('.sidenav_wrapper:first')).hide();

或者如果您想保持当前 div 打开，

$('.sidenav_wrapper:visible').hide();

Updated Fiddle

或者在单个集合上使用 .add() 和 .toggle() 的更简单的一个衬垫，

$('.sidenav_wrapper:visible').add($(this).find('.sidenav_wrapper:first')).toggle();

Updated Fiddle2

Answer 2

实现它的简短方法，实际上不允许动画是这样的

$(menuThing).on('click', function(){
     $(menuThing).toggle(false);
     $(this).toggle(true);
})

它会关闭 'all' 菜单，然后打开您当前单击的菜单。只要你不做 slideToggle() 或类似的事情，这在视觉上就可以工作。询问是否需要更多说明

Answer 3

添加这个：

$('ul.navbar-nav li').find('.sidenav_wrapper:first').hide();

所以它会先隐藏它们，然后显示所选的。

Fiddle

Answer 4

当您显示当前 .sidenav_wrapper 时，您将需要隐藏其他 .sidenav_wrapper。

所以只需在 .click() function 中添加 $("li ul.sidenav_wrapper").css("display","none");，然后再切换当前 .sidenav_wrapper

Answer 5

使用这个简单的方法：

 $( ".sidenav_active" ).parent().css({"display":"block"});

    $('ul.navbar-nav li').click(function(){
            $('.sidenav_wrapper').hide();
            $(this).find('.sidenav_wrapper:first').toggle();
        });

jsfiddle: http://jsfiddle.net/rsewsg4t/3/

Answer 6

不使用切换，而是在 css 中添加一个 class 以将其显示为块。然后，在适当的事件上相应地使用 addClass() 和 removeClass() 。您可能需要使用 .not() 来定位除当前单击的所有其他 li。

Answer 7

你只需要

Accordions. You will see it do magic!

我相信手风琴很容易解决你的问题。额外的好处是，您可以使用手风琴整洁干净。

Nest as you add and scale

这包含菜单，每个菜单包含子菜单，其中一次只能打开一个，子菜单包含三级菜单，其中一次只能打开一个。

Keep your code clean

无需编写多行点击监听器和切换器。您需要做的就是添加 bootstrap（css 和 js）和 jQuery（js），这将开箱即用。

我想你正在寻找这样的东西：

Save this as something.html and open it in browser

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body>
    <div id="accordion" class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#name-parent-select">
                            <h4 class="panel-title">Name</h4>
                        </a>
                    </div>
                    <div id="name-parent-select" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="input-group">
                                  <input id="nameFill" type="text" class="form-control" placeholder="Type name...">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Go!</button>
                                  </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#number-parent-select">
                            <h4 class="panel-title">Number</h4>
                        </a>
                    </div>
                    <div id="number-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="input-group">
                                  <input id="phoneFill" type="text" class="form-control" placeholder="Type number...">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Go!</button>
                                  </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#group-parent-select">
                            <h4 class="panel-title">Group</h4>
                        </a>
                    </div>
                    <div id="group-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="input-group">
                                  <input type="text" class="form-control" placeholder="Type group name...">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Go!</button>
                                  </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#call-type-parent-select">
                            <h4 class="panel-title">Call Type</h4>
                        </a>
                    </div>
                    <div id="call-type-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li> <div class="checkbox call-type-checkbox"> <label> <input id="missedFill" type="checkbox"> Missed </label> </div> </li>
                                <li> <div class="checkbox call-type-checkbox"> <label> <input id="incomingFill" type="checkbox"> Incoming </label> </div> </li>
                                <li> <div class="checkbox call-type-checkbox"> <label> <input id="outgoingFill" type="checkbox"> Outgoing </label> </div> </li>
                                <li> <div class="checkbox call-type-checkbox"> <label> <input id="blockedFill" type="checkbox"> Blocked </label> </div> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#date-parent-select">
                            <h4 class="panel-title">Date</h4>
                        </a>
                    </div>
                    <div id="date-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Today </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Yesterday </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Last Week </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Last Fortnight </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Last Month </label> </div> </li>
                            </ul>
                            <div id="sub-accordion-date" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-select">
                                            <h4 class="panel-title">Custom Date</h4>
                                        </a>
                                    </div>
                                    <div id="between-date-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="Select date... dd/mm/yyyy">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
                                                  </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-range-select">
                                            <h4 class="panel-title">Custom Range</h4>
                                        </a>
                                    </div>
                                    <div id="between-date-range-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="Start date... dd/mm/yyyy">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
                                                  </span>
                                            </div>
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="End date... dd/mm/yyyy">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
                                                  </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#time-parent-select">
                            <h4 class="panel-title">Time</h4>
                        </a>
                    </div>
                    <div id="time-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Morning </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Afternoon </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Evening </label> </div> </li>
                                <li> <div class="checkbox"> <label> <input type="checkbox"> Night </label> </div> </li>

                            </ul>
                            <div id="sub-accordion-time" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-time" href="#between-time-select">
                                            <h4 class="panel-title">Custom</h4>
                                        </a>
                                    </div>
                                    <div id="between-time-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="Start time... hh:mm">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
                                                  </span>
                                            </div>
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="End time... hh:mm">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
                                                  </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#duration-parent-select">
                            <h4 class="panel-title">Duration</h4>
                        </a>
                    </div>
                    <div id="duration-parent-select" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div id="sub-accordion-duration" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#greater-than-duration-select">
                                            <h4 class="panel-title">Greater than</h4>
                                        </a>
                                    </div>
                                    <div id="greater-than-duration-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#less-than-duration-select">
                                            <h4 class="panel-title">Less than</h4>
                                        </a>
                                    </div>
                                    <div id="less-than-duration-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
                                                <li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#between-duration-select">
                                            <h4 class="panel-title">Between</h4>
                                        </a>
                                    </div>
                                    <div id="between-duration-select" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="Start duration... mm:ss">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
                                                  </span>
                                            </div>
                                            <div style="padding-top:10px;"> </div>
                                            <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="End duration... mm:ss">
                                                  <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
                                                  </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> </script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"> </script>
</body> </html>

你会在运行之后说这个... LOLZ

Hurrah! It works...

单击另一个菜单时关闭菜单

getting a menu to close when another menu is clicked

jquery

menu