gpt4 book ai didi

javascript - 引导 Accordion : Not Auto-Collapsing when another is clicked

转载 作者:行者123 更新时间:2023-12-03 05:01:16 25 4
gpt4 key购买 nike

我知道有与此类似的帖子,但我找不到答案。

我有一些自定义布局,但我想尝试添加 Accordion 效果,但我似乎无法弄清楚为什么,但由于某种原因,一切都运行良好,除了单击另一个布局后它们不会自动关闭.

这是我的 Accordion 代码:

   <aside class="col-lg-4">
<div class="list-group">
<ul class="product-sorting">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel panel-group">
<li><a href="#" data-group="all" class="list-group-item active">All Products</a></li>
<li>
<a data-group="IQF" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">IQF Fruits (Individually Quick Frozen)
</a>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Fruit-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Fruit Juice Concentrate
</a>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-pulp" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Fruit Puree/ Pulp
</a>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
Fruit Puree Concentrate
</a>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="NFC" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
NFC
</a>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Organic" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
Organic
</a>
<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Dried" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Dried Fruit/ Sweetened Dried Fruit
</a>
<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
</div>
</ul>
</div>
</aside>

这就是它的样子:

文本“果汁是直接从水果/蔬菜中榨取的。100% 果汁不含添加糖或防腐剂。”只是虚拟文本,所有面板都相同,因此不要让这让你感到困惑。

Default state all cool

Fist Accordion click - still all good

As soon as you click another accordion that one expands whilst the first one stays expanded.

最佳答案

使用<div class="accordion-group">

并分配 data-parent="#parentdivid"到每个 Accordion 。

示例片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<h3>ACCORDION COLLAPSE</h3>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>

关于javascript - 引导 Accordion : Not Auto-Collapsing when another is clicked,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42219943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com