问题描述
当菜单列表被点击并处于活动状态时,我遇到了点击并隐藏其他面板的问题。
@{int i = 0;}
@foreach (var levelOne in Model.MenuLevelOne)
{
<div class="panel-group" id="accordion_@i">
<div class="panel panel-default" id="panel_@i">
<div class="panel-heading">
<h4 class="panel-title">
<a onclick="leveltwo('@levelOne.MenuLevel')" data-toggle="collapse" data-target="#collapSEOne_@i" href="#collapSEOne_@i">@levelOne.MenuLevel</a>
</h4>
</div>
<div id="collapSEOne_@i" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="" id="id-@levelOne.MenuLevel"></ul><ul class="filter-categories__list"></ul>
</div>
</div>
</div>
</div>
i++;
}
水果
Apple
Pear
Grape
蔬菜
Carrot
Cucumber
Beetroot
其他
Cake
Chocalte
所有这些都在页面加载时折叠,这很好并且可以正常工作,
显示为:
Fruit
Veg
Other
例如,如果我打开 Fruit,然后打开 Veg。水果应该关闭,蔬菜应该打开。
Fruit
Apple
Pear
Grape
Veg
Other
这现在应该像这样打开,但它不起作用。
Fruit
Veg
Carrot
Cucumber
Beetroot
Other
谁能告诉我代码哪里错了?
谢谢
新错误:
解决方法
你需要添加一个功能来关闭每次打开的标签:
$(document).ready(function () {
$('.collapse').on('show.bs.collapse',function () { //Triggered everytime the collapse is show
$('.collapse.in').each(function () { //select current collapsed (some versions could be .show instead of .in
$(this).collapse('hide'); //hide previously collapsed
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion_0">
<div class="panel panel-default" id="panel_0">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne_0" href="#collapseOne_0">1</a>
</h4>
</div>
<div id="collapseOne_0" class="panel-collapse collapse">
<div class="panel-body">
<ul class="" id="id-1">
<li>Nível 1 - Item 1</li>
<li>Nível 1 - Item 2</li>
<li>Nível 1 - Item 3</li>
</ul>
<ul class="filter-categories__list">
<li>Nível 1 - Filtro 1</li>
<li>Nível 1 - Filtro 2</li>
<li>Nível 1 - Filtro 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion_1">
<div class="panel panel-default" id="panel_1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne_1" href="#collapseOne_1">2</a>
</h4>
</div>
<div id="collapseOne_1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="" id="id-2">
<li>Nível 2 - Item 1</li>
<li>Nível 2 - Item 2</li>
<li>Nível 2 - Item 3</li>
</ul>
<ul class="filter-categories__list">
<li>Nível 2 - Filtro 1</li>
<li>Nível 2 - Filtro 2</li>
<li>Nível 2 - Filtro 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion_2">
<div class="panel panel-default" id="panel_2">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne_2" href="#collapseOne_2">3</a>
</h4>
</div>
<div id="collapseOne_2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="" id="id-3">
<li>Nível 3 - Item 1</li>
<li>Nível 3 - Item 2</li>
<li>Nível 3 - Item 3</li>
</ul>
<ul class="filter-categories__list">
<li>Nível 3 - Filtro 1</li>
<li>Nível 3 - Filtro 2</li>
<li>Nível 3 - Filtro 3</li>
</ul>
</div>
</div>
</div>
</div>