Javascript 如何仅通过单击打开和折叠相同的 JQuery 手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29096037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open and collapse the same JQuery accordion with click on it only
提问by avnaveen
Trying to get the accordion open and collapse onlywhen it's being clicked. I am able to open/collapse it but it is getting closed alsowhen another accordion is clicked.
试图让手风琴打开并只有在被点击时才折叠起来。我能够打开/折叠，但它是越来越封闭也被点击另一个手风琴时。
It should open or close on its own - independently from other accordions.
它应该自己打开或关闭 - 独立于其他手风琴。
This is what I have tried.
这是我尝试过的。
JS:
JS：
$(document).on("click", ".accordion-toggle", function () {
if ($(this).attr('class').indexOf('open') == -1)
$(this).toggleClass("open").next().slideToggle('fast');
//Hide the other panels
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this).next()).slideUp('fast');
});
Fiddle: Demo
小提琴： 演示
回答by avnaveen
I have created a new fiddle with some css...
我用一些css创建了一个新的小提琴......
HTML
HTML
<div class="accordion-container">
<a href="#" class="accordion-toggle">Heading 1</a>
<div class="accordion-content">
Content 1
</div>
</div>
<div class="accordion-container">
<a href="#" class="accordion-toggle">Heading 2</a>
<div class="accordion-content">
Content 2
</div>
</div>
<div class="accordion-container">
<a href="#" class="accordion-toggle">Heading 3</a>
<div class="accordion-content">
Content 3
</div>
</div>
JS
JS
$(document).ready(function () {
$('.accordion-toggle').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.next('.accordion-content');
// toggle accordion link open class
accordion.toggleClass("open");
// toggle accordion content
accordionContent.slideToggle(250);
});
});
please check this fiddle
请检查这个小提琴
回答by Ian Patel
Easy and simple bootstrap accordionon a click
HTML
accordion单击 HTML 上的 简单引导程序
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
Simple js code
简单的js代码
$(".openpanel").on("click", function() {
$("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
$("#panel3").collapse('hide');
});
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
I hope it will help you.
我希望它会帮助你。
