javascript - Jquery 幻灯片优先

Question

我正在与其他人一起工作，否则我会采用这种不同的方式，但我正在尝试从中创建一个简单的 Accordion 。

问题是它只幻灯片显示第一批div，它应该找到其父div并幻灯片放映。

JS

  $('h3.jqueryheading').click(function() {
      $(this).parent().find('div:first').slideToggle( "slow", function() {});
   });

HTML

<h3 class="jqueryheading" style="cursor:pointer">Heading One</h3>
<div style="display:none;">
  <p><img src="one.jpg"/></p>
  <p><img src="two.jpg"/></p>
</div>

<h3 class="jqueryheading" style="cursor:pointer">Heading Two</h3>
<div style="display:none;">
  <p><img src="three.jpg"/></p>
  <p><img src="four.jpg"/></p>
</div>

有什么想法为什么会发生这种情况吗？

Answer 1

定位父级，然后所有 DIV 都会为您提供所有 DIV，因为它们是同一父级的子级，只需定位 next() DIV

$('h3.jqueryheading').click(function () {
    $(this).next('div').slideToggle("slow");
});

FIDDLE