同时展开/折叠几个块？ [英] Expand/Collapse several blocks at the same time?
问题描述
我的页面中有几个块。我使用bootstrap 4 alpha 6版本。我想通过单击一个按钮来展开/折叠这些块。知道我使用下一个JS代码，它只打开所有块，但如何关闭它们？！如何解决这个问题？
HTML：
< div class =card>
< div class =card-header>
< button id ='expand-collapse'type =buttondata-parent =＃blocksdata-toggle =collapsedata-target =。blockaria-expanded =falsearia - 对照= GT 块。;
< / button>
< / div>
< div class =card-block>
< div id =blocks>
< div class =list-group>
< div class =list-group-item>
< div class =collapse blockid =block-1>
<！ - 第一块块 - >
< / div>
< / div>
< div class =list-group-item>
< div class =collapse blockid =block-2>
<！ - SECOND BLOCK - >
< / div>
< / div>
< div class =list-group-item>
< div class =collapse blockid =block-3>
<！ - THIRD BLOCK - >
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
JAVASCRIPT：
（'click'，function（）{//我们捕获点击事件$（$'code $> b $ b var target = $（this）.attr（'data-target'）; //得到目标元素选择符
$（target）.each（function（）{//遍历每个元素
if（$（this）.hasClass（'show'））{//检查它是否已经可见
$（this）.collapse（'hide'）; //相应地显示并隐藏
} else {
$（this）.collapse（'show'）;
}
}）;
}）;
} ）;
$ b $（document）.ready（function（）{
$（'。collapse'）
.on（'shown.bs.collapse'，function（event）{
event.stopPropagation（）;
$（this）
.parent（）。parent（）
.find（。fa-commenting-o）
.removeClass（fa-commenting-o）
.addClass（fa-commenting）;
}）。on（'hidden.bs.collapse'，function（event）{
event.stopPropagation（）;
$（this）
.parent（）。parent（）
.find（。fa-commenting）
.removeClass（fa ）;
.addClass（fa-commenting-o）;
}）;
}）;
您使用的代码将在bootstrap3中按预期工作由于处理崩溃的方式（可以使用引导程序V3的JS和CSS来验证它）
为了解决您的问题，以下代码段将按预期工作：
$（function（）{
$（'＃expand-collapse'）。 ，function（）{//我们捕获点击事件
var target = $（this）.attr（'data-target'）; //得到目标元素选择符
$（target）。 each（function（）{//遍历每个元素
if（$（this）.hasClass（'show'））{//检查它是否已经可见
$（this）.collapse （'hide'）; //相应地显示和隐藏
} else {
$（this）.collapse（'show'）;
}
}） ;
}）;
}）;
提示：
我们还可以将
p>toggle参数传递给collapse函数，并去掉if-else条件
$（this）.collapse（'toggle'）;可以用来取代if-else
但是我没有在我的例子中使用它来表明你可以在其中添加额外的计算
工作小提琴
更新： 为了达到这个目的，我们可以使用触发操作的默认方法与一个按钮元素。 您可以找到更新的 jsFidde here I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem? HTML: JAVASCRIPT:
The code that youve used will work as expected in bootstrap3 due to the way collapse was handled then (You can verify it by using JS & CSS of bootstrap V3) Comming to solving your problem the following snippet would work as expected: TIP: We can also pass But I did not use this in my example to show that you can add additional computation in it Working Fiddle UPDATE:
The updated question asks for individual control for the block To acheive that, we can use the default method of triggering the action with a button element. You can find the updated jsFidde here 这篇关于同时展开/折叠几个块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更新后的问题要求单独控制该块
< div class =list-group-item>
< div class =collapse blockid =block-1>
FIRST BLOCK
< / div>
< / div>
< button class =btn btn-primarytype =buttondata-toggle =collapsedata-target =＃block-1>
Block 1
< / button>
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1"OPEN FIRST</a>
<div class="collapse block" id="block-1">
<!--FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN SECOND</a>
<div class="collapse block" id="block-2">
<!--SECOND BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN THIRD</a>
<div class="collapse block" id="block-3">
<!--THIRD BLOCK-->
</div>
</div>
</div>
</div>
</div>
</div>
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting-o")
.removeClass("fa-commenting-o")
.addClass("fa-commenting");
}).on('hidden.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting")
.removeClass("fa-commenting")
.addClass("fa-commenting-o");
});
});
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
toggle argument to the collapse function and get rid of the if-else condition$(this).collapse('toggle'); can be used to replace the if-else <div class="list-group-item">
<div class="collapse block" id="block-1">
FIRST BLOCK
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#block-1">
Block 1
</button>
