如何仅通过单击打开和折叠相同的 JQuery 手风琴
How to open and collapse the same JQuery accordion with click on it only
尝试打开手风琴并在单击时折叠仅。我可以 open/collapse 它,但是当单击另一个手风琴时它正在关闭 也 。
它应该独立于其他手风琴打开或关闭。
这是我试过的。
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
轻松简单 bootstrap 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>
简单的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');
});
希望对你有所帮助
我用一些 css...
创建了一个新的 fiddle
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
$(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);
});
});
请检查这个fiddle
尝试打开手风琴并在单击时折叠仅。我可以 open/collapse 它,但是当单击另一个手风琴时它正在关闭 也 。
它应该独立于其他手风琴打开或关闭。
这是我试过的。
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
轻松简单 bootstrap 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>
简单的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');
});
希望对你有所帮助
我用一些 css...
创建了一个新的 fiddleHTML
<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
$(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);
});
});
请检查这个fiddle