如何使用外部 buttons/controls 循环浏览手风琴内容?
How can I cycle through an accordions content using external buttons/controls?
所以我这里有一个简单的手风琴 - https://jsfiddle.net/fLLbkxcf/ - 它使用 slideToggle 来显示和隐藏手风琴内容。
$(".accordion_trigger").click(function () {
$(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings(".accordion_trigger").removeClass("current");
});
但是我在手风琴下方有一些按钮(下一个,上一个)我希望能够循环显示手风琴的不同状态。
有没有人知道我应该如何解决这个问题或者可以指出正确的方向?
您可以有一个点击处理程序,您可以在其中找到当前元素,然后根据是否显示 prev/next 元素进行导航
$(".accordion_trigger").click(function() {
$(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings(".accordion_trigger").removeClass("current");
});
$('.acc-ext-trigger').click(function() {
var $curr = $(".accordion_trigger.current"),
dir = $(this).data('dir');
var $next = $curr[dir == -1 ? 'prevAll' : 'nextAll']('.accordion_trigger');
$next = $next.length ? $next : $('.accordion_trigger')[dir == -1 ? 'last' : 'first']();
$next.triggerHandler('click');
});
.accordion_holder {
display: none;
background: #dddddd;
border-bottom: 1px solid black;
}
.accordion_trigger {
width: 100%;
background: grey;
border-bottom: 1px solid black;
}
.accordion_trigger p,
.accordion_holder p {
margin: 0;
}
/* Clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Accordion 1 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 1</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion 2 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 2</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion 3 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 2</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion controls -->
<a href="#" class="acc-ext-trigger" data-dir="1">Next</a>
<a href="#" class="acc-ext-trigger" data-dir="-1">Previous</a>
所以我这里有一个简单的手风琴 - https://jsfiddle.net/fLLbkxcf/ - 它使用 slideToggle 来显示和隐藏手风琴内容。
$(".accordion_trigger").click(function () {
$(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings(".accordion_trigger").removeClass("current");
});
但是我在手风琴下方有一些按钮(下一个,上一个)我希望能够循环显示手风琴的不同状态。
有没有人知道我应该如何解决这个问题或者可以指出正确的方向?
您可以有一个点击处理程序,您可以在其中找到当前元素,然后根据是否显示 prev/next 元素进行导航
$(".accordion_trigger").click(function() {
$(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings(".accordion_trigger").removeClass("current");
});
$('.acc-ext-trigger').click(function() {
var $curr = $(".accordion_trigger.current"),
dir = $(this).data('dir');
var $next = $curr[dir == -1 ? 'prevAll' : 'nextAll']('.accordion_trigger');
$next = $next.length ? $next : $('.accordion_trigger')[dir == -1 ? 'last' : 'first']();
$next.triggerHandler('click');
});
.accordion_holder {
display: none;
background: #dddddd;
border-bottom: 1px solid black;
}
.accordion_trigger {
width: 100%;
background: grey;
border-bottom: 1px solid black;
}
.accordion_trigger p,
.accordion_holder p {
margin: 0;
}
/* Clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Accordion 1 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 1</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion 2 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 2</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion 3 -->
<div class="accordion_trigger">
<p class="leadin">Accordion Title 2</p>
</div>
<div class="accordion_holder">
<div class="clearfix">
<p>This is a test</p>
</div>
</div>
<!-- Accordion controls -->
<a href="#" class="acc-ext-trigger" data-dir="1">Next</a>
<a href="#" class="acc-ext-trigger" data-dir="-1">Previous</a>