Bootstrap-仅在特定区域一次仅显示一个折叠
我在boostrap中有一个自定义的内置部分，其中有6张卡片，每个card下方都有自己的全角折叠，
我希望每次点击卡片时只显示一个折叠项；
这是结构的外观，X表示，如果您访问了崩溃1，崩溃2和崩溃3，则只需要显示第三个元素下拉列表即可：
HTML结构：
<div class="container hardware-section">
<div class="row">
<div class="single-hardware">
<div class="col-md-2" >
<a href="#first-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#sec-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#thr-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#for-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#fiv-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#six-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
</div> <!-- Product display row end -->
<div class="row hardware-info-container">
<div id="first-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..1..</p>
</div>
<div id="sec-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..2..</p>
</div>
<div id="thr-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..3..</p>
</div>
<div id="for-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..4..</p>
</div>
<div id="fiv-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..5..</p>
</div>
<div id="six-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..6..</p>
</div>
</div>
</div>
如果您也可以通过jsfiddle示例帮助我，那就太好了。
最诚挚的问候
2 个答案:
答案 0 :(得分：1)
未添加额外的CSS或HTML，仅添加了一些jquery代码。希望这会有所帮助。 还添加了“在”第一个描述容器中的类，以默认显示第一个容器
$(document).ready(function(){
$(document).on('click','.single-hardware a',function(){
ref = $(this).attr('href');
$('.collapse').removeClass('in');
$('.hardware-info-container').find(ref).addClass('in');
})
});
</script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container hardware-section">
<div class="row">
<div class="single-hardware">
<div class="col-md-2" >
<a href="#first-hardware" data-toggle="collapse " id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#sec-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#thr-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#for-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#fiv-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#six-hardware" data-toggle="collapse" id="hardwareSection">
<img src="img/sample-hardware.png" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
</div> <!-- Product display row end -->
<div class="row hardware-info-container">
<div id="first-hardware" class="collapse in hardware-info">
<p>Lorem ipsum dolor text..1..</p>
</div>
<div id="sec-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..2..</p>
</div>
<div id="thr-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..3..</p>
</div>
<div id="for-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..4..</p>
</div>
<div id="fiv-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..5..</p>
</div>
<div id="six-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..6..</p>
</div>
</div>
</div>
答案 1 :(得分：1)
这很简单
首先，使用多个具有相同名称的id会产生一个错误，因此将它们还原为类似id=hardwareSection的类，例如class=hardwareSection
因此，每次点击hardwareSection链接时，都应使用jQuery从所有in div中删除class='hardware-info'类，除具有相同hardwareSection div点击元素索引的元素外，如下所示
$(".hardwareSection").on("click",function(e,i){
var index = $('.hardwareSection').index(this);
$(".hardware-info").not($(".hardware-info").eq(index)).removeClass("in");
})
请参见下面的工作片段：
$(function(){
$(".hardwareSection").on("click",function(e,i){
var index = $('.hardwareSection').index(this);
$(".hardware-info").not($(".hardware-info").eq(index)).removeClass("in");
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container hardware-section">
<div class="row">
<div class="single-hardware">
<div class="col-md-2" >
<a href="#first-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#sec-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#thr-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#for-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#fiv-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
<div class="single-hardware">
<div class="col-md-2">
<a href="#six-hardware" data-toggle="collapse" class="hardwareSection">
<img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
<h4 class="single-hardware-title">Procut title</h4>
</a>
</div>
</div>
</div> <!-- Product display row end -->
<div class="row hardware-info-container">
<div id="first-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..1..</p>
</div>
<div id="sec-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..2..</p>
</div>
<div id="thr-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..3..</p>
</div>
<div id="for-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..4..</p>
</div>
<div id="fiv-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..5..</p>
</div>
<div id="six-hardware" class="collapse hardware-info">
<p>Lorem ipsum dolor text..6..</p>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？