Bootstrap手风琴(点击手风琴时应该关闭其他手风琴)
问题描述:
我目前的手风琴功能是当我们点击'+'号时,它会打开手风琴并将它打开,即使我们点击了其他手风琴的'+'号。Bootstrap手风琴(点击手风琴时应该关闭其他手风琴)
我需要的是点击一个手风琴,其他开放手风琴应关闭。 以下是我的Codepen链接。
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
<a href="#" class="sidebar-collapse-link">Viewr</a>
<a href="#" class="sidebar-collapse-link">Change</a>
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
<a href="#" class="sidebar-collapse-link">View</a>
<a href="#" class="sidebar-collapse-link">Change </a>
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
感谢 CodePen
答
您可以通过使用data-parent
你的链接做到这一点,这里是你的代码片断
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
<a href="#" class="sidebar-collapse-link">Viewr</a>
<a href="#" class="sidebar-collapse-link">Change</a>
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
<a href="#" class="sidebar-collapse-link">View</a>
<a href="#" class="sidebar-collapse-link">Change </a>
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
我有一个问题。应该在哪里编写代码.var $ myGroup = $('#myGroup'); ('。collapse.in')。collapse('hide'); });这个函数可以用来创建一个新的文件, – user3916062
写入内部脚本标记。 如
我做到了它不是触发 – user3916062