Question

我正在尝试使用以下jQuery创建一个手风琴：

 var allPanels = $('.accordion > div.showlist > p.showdetails').hide();

  $('.accordion > div.showlist > strong').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

HTML：

<div class="accordion">
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
</div>

p.showdetails被隐藏得很好，但点击strong时没有任何反应。知道我做错了吗？

Answer 1

你的目标是错误的。

如果您的click活动在<strong>上，那么$(this).parent().next()会选择其父div.showlist旁边的div.showlist（哇！）。

只需$(this).next('p.showdetails').slideDown();即可。

修改

由于您也在使用动画，因此在allPanels.slideUp()调用之前调用.slideDown()将排队动画，因此看起来面板正在向下滑动单击，如果您点击当前可见<strong>的{{1}}元素。

您应该执行类似

的操作

p.showdetails

...或类似的东西以防止这种情况。

Ooooooooooooooor你可以使用jQueryUI Accordion插件。很高兴你可以做这个练习。

Answer 2

$(this).parent().next()不会返回下一个div.showlist吗？我想你想要的是：

$(".showdetails", $(this).parent().next()).slideDown();

Answer 3

编辑：

我做了一些工作并想出了这个。

您需要使用

 $(".showdetails", $(this).parent()).slideDown();

我在jsfiddle中做了一个你可以参考的样本。

http://jsfiddle.net/nS84p/3/

的可选 的

您可以选择简单且用户友好的jQuery手风琴

Refer This URL For Information

Answer 4

我明白了：

$(".showdetails", $(this).parent()).slideDown();

感谢大家的帮助。

在jQuery中创建一个手风琴

4 个答案:

修改