我有一个带有一堆列的主容器div。这些列中的每一列都有一个data-toggle="collapse"属性，以及一个特殊的id数据目标属性。
接下来，我有6个分隔的div容器，其中包含列和内容。
我希望一次显示一个div。单击一个div后，上一个将被隐藏。
这是我所做的，唯一不确定的是如何隐藏以下注释中的内容div：
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#one">
<h1>Content 1</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#two">
<h1>Content 2</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#three">
<h1>Content 3</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#four">
<h1>Content 4</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#five">
<h1>Content 5</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#six">
<h1>Content 6</h1>
</div>
</div>
</div>
<!--Content divs below-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#one">
<h1>Content 1</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#two">
<h1>Content 2</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#three">
<h1>Content 3</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#four">
<h1>Content 4</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#five">
<h1>Content 5</h1>
</div>
<div class="col-sm-12 col-md-4" data-toggle="collapse" data-
target="#six">
<h1>Content 6</h1>
</div>
</div>
</div>
<!--Content divs below-->
<div class="container collapse" id="one">
<div class="row">
<div class="col-md-4">
<h1>Content from div 1</h1>
</div>
</div>
</div>
<div class="container collapse" id="two">
<div class="row">
<div class="col-md-4">
<h1>Content from div 2</h1>
</div>
</div>
</div>
<div class="container collapse" id="three">
<div class="row">
<div class="col-md-4">
<h1>Content from div 3</h1>
</div>
</div>
</div>
<div class="container collapse" id="four">
<div class="row">
<div class="col-md-4">
<h1>Content from div 4</h1>
</div>
</div>
</div>
<div class="container collapse" id="five">
<div class="row">
<div class="col-md-4">
<h1>Content from div 5</h1>
</div>
</div>
</div>
<div class="container collapse" id="six">
<div class="row">
<div class="col-md-4">
<h1>Content from div 6</h1>
</div>
</div>
</div>下面的示例可帮助您解决问题。
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});.container .box {
float: left;
width: 150px;
margin: 20px;
}
.container .box .top {
padding: 12px;
background-color: blue;
color: white;
cursor: pointer;
}
.container .box .bottom {
padding: 12px;
background-color: red;
color: white;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="top">
click me
</div>
<div class="bottom">
door #1
</div>
</div>
<div class="box">
<div class="top">
click me
</div>
<div class="bottom">
door #2
</div>
</div>
<div class="box">
<div class="top">
click me
</div>
<div class="bottom">
door #3
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句