javascript - 如何使用外部按钮/控件循环浏览 Accordion 内容？

Question

所以我这里有一个简单的 Accordion - https://jsfiddle.net/fLLbkxcf/ - 使用 slideToggle 显示和隐藏 Accordion 内容。

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

但是我在 Accordion 下方有一些按钮(下一个，上一个)我希望能够循环显示 Accordion 的不同状态。

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

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>