[英]close the opened accordion menu when second accordion menu is clicked, bootstrap
我在网站的移动视图上有两个图标。 一个是搜索图标,另一个是菜单图标。 两者都使用Bootstrap手风琴来显示和隐藏搜索选项和菜单选项。
手风琴正在按预期的方式工作。
但是问题是当一个菜单打开时,如果您单击第二个菜单,它们都会保持打开状态。 理想情况下,如果您单击第二个菜单,则应该关闭第一个菜单,反之亦然。
这是我的两个菜单代码:
<button class="mobile-search navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#nav-search">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-search"></i>
</button>
<button class="navbar-toggle mobile-menu col-sm-1" type="button" data-toggle="collapse" data-target="#channel-list-mobile">
<span class="sr-only">Toggle navigation</span>
<img alt="Channel List Icon" class="img-responsive" src="/Images/ui/channel-list.png">
</button>
搜索菜单选项如下所示(仅作为示例):
<div class="collapse" id="nav-search">
<div class="row">
<div class="col-xs-12">
<div id="inline-search">
<div class="search-type">
<div class="row">
<label for="search-buy" class="radio-inline col-xs-6 inline-labels">
@Html.RadioButton("propertyType", 1, Shared.SearchCriteria.SaleProducts, new { id = "1" }) <span>Buy</span>
</label>
<label class="radio-inline rent-mobile col-xs-6 inline-labels">
@Html.RadioButton("propertyType", 0, !Shared.SearchCriteria.SaleProducts, new { id = "2" }) <span>Rent</span>
</label>
</div>
</div>
</div>
</div>
</div>
菜单选项代码:
<nav class="visible-xs collapse" id="mobile-nav-accordion">
<div class="panel-group" id="mobile-menu">
<div id="channel-list-mobile" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
home
</h4>
</div>
</div>
<!--nested accordion-->
<div id="mobile-menu-list" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mobile-menu-list" href="#services-mobile">
Services <i class="fa fa-caret-down pull-right"></i>
</a>
</h4>
</div>
<div id="services-mobile" class="panel-collapse collapse">
<div class="panel-body">
<ul class="mobile-nav">
<li>
<a href="@Url">test...</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
上面的代码只是为了展示我正在使用的引导程序结构。
那么,如果您单击第二个菜单,反之亦然,如何关闭第一个菜单呢?
如果我是您,我会尝试将默认的手风琴模板与您的现有代码合并,因为您的代码中缺少很多块。
另外,您应同时使用这两个控件来控制打开/关闭哪些标签页
class="panel-collapse collapse">
class="panel-collapse collapse in">
收起= 当前打开
收起= 已关闭
使用JavaScript将其修复。
为按钮添加了ID:
<button id="mobile-search-button" class="mobile-search navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#nav-search">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-search"></i>
</button>
<button id="mobile-menu-button" class="mobile-menu navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#channel-list-mobile">
<span class="sr-only">Toggle navigation</span>
<img alt="Channel List Icon" class="img-responsive" src="/Images/ui/channel-list.png">
</button>
这是javascript修复程序:
var lastaccordion = null;
$('#mobile-search-button').click(function () {
if (lastaccordion != null) {
if (lastaccordion.attr('id') != 'nav-search') {
lastaccordion.collapse('hide');
}
}
lastaccordion = $('#nav-search');
});
$('#mobile-menu-button').click(function () {
if (lastaccordion != null) {
if (lastaccordion.attr('id') != 'channel-list-mobile') {
lastaccordion.collapse('hide');
}
}
lastaccordion = $('#channel-list-mobile');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.