Jquery Multiple Accordions on page with

Question

我创建了自己的基于jquery的手风琴。它利用"data"属性来触发正确的隐藏/显示div。一切都很好，但我想扩展它，这样如果一个页面上有多个这样的实例，每个手风琴集都可以打开一个幻灯片。现在，对于手风琴的任何/所有实例，只能打开一个幻灯片。

如何使单击操作特定于父元素（.contator）？

有关其他代码，请参阅我的CodePen示例。

http://codepen.io/rymill2/pen/qtfLE?editors=101

标记：

<div class="contain">
  <div class="centered m-accordion">
     <h3 class="a-trigger">Section Title<span class="a-trigger-arrow"></span></h3>
     <div class="a-content">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu varius eros. Phasellus fringilla porttitor eros eget condimentum. Vivamus ornare ornare arcu, eu commodo mauris vestibulum at. Fusce sed nibh nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in ante tempus, imperdiet eros nec, viverra turpis. Cras sem turpis, suscipit dignissim mauris id, faucibus dapibus orci. Nam malesuada eros sapien, vitae pretium lorem elementum non. Suspendisse eros risus, faucibus nec est sit amet, dictum ultricies eros. Ut porttitor lacus sit amet mauris dictum accumsan. Aliquam pulvinar dui quam, vitae dapibus dolor interdum ac. Proin eget justo varius, tincidunt elit ac, semper odio.</p>
     </div>
  </div>

Jquery：

var contain = $('.contain'),
trigger = $(".a-trigger"),
arrow = $(".a-trigger-arrow"),
content = $(".a-content");
contain.each(function(i){
  i = i+1;
  $(this).addClass('c-' + i);
});
trigger.each(function(i){
  i = i+1;
  $(this).attr('data-target', 'a' + i);
});
content.each(function(i){
  i = i+1;
  $(this).addClass('a' + i);
});

$(trigger).click(function () {
  //e.stopPropagation();
  var $target = $('.' + $(this).data('target'));
  $(this).addClass('active').find(arrow).addClass('open');
  trigger.not($(this)).removeClass('active').find(arrow).removeClass('open');
  $target.stop().delay(300).slideDown();
  if ($target.is(':visible')) {
    $(this).removeClass('active').find(arrow).removeClass('open');
    $target.stop().slideUp();
  } else {
    $('.a-content:visible').not($(this)).stop().slideUp();
  }
});

Answer 1

大多数情况下，初始化变量时需要更加具体：

$('.contain').each(function() {
    var contain = $(this),
        trigger = $(this).find(".a-trigger"),
        arrow   = $(this).find(".a-trigger-arrow"),
        content = $(this).find(".a-content");
    ...
    $(trigger).click(function () { ... }
});