Question

我已经创建了自己的基于jquery的手风琴。它利用了数据＆＃39;属性以触发正确的隐藏/显示div。一切都运行正常，但我想扩展它，以便如果页面上有多个这样的实例，每个手风琴组可以打开一个幻灯片。就像现在一样，只有一张幻灯片可以打开手风琴的任何/所有实例。

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

请参阅我的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 () { ... }
});

Jquery多个手风琴在页面上

1 个答案: