如何使用外部按钮/控件循环浏览手风琴内容？

Question

所以我在这里有一个简单的手风琴 - 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");
});

但是，我在手风琴下方有一些按钮（下一个、上一个），我希望能够在手风琴的不同状态之间循环。

有没有人知道我应该如何解决这个问题，或者可以指出正确的方向？

Answer 1

您可以有一个点击处理程序，您可以在其中找到当前元素，然后根据是否显示上一个/下一个元素进行导航

$(".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>