0

我正在尝试使用以下 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单击时没有任何反应。知道我做错了什么吗？

4

4 回答 4

2

你的目标是错误的。

如果您的click活动是 on <strong>，那么$(this).parent().next()将选择div.showlist它的父母旁边的下一个div.showlist（哇！）。

应该$(this).next('p.showdetails').slideDown();可以正常工作。

编辑

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

你应该做类似的事情

var panel = $(this).next('p.showdetails').slideDown();
allPanels.not(panel).slideUp();

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

Oooooooooooooooo 或者你可以使用 jQueryUI Accordion 插件。不过，很高兴你能把这个当作练习。

于 2013-05-24T08:56:22.603 回答
1

编辑 ：

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

你需要使用

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

我在 jsfiddle 中做了一个示例，您可以参考。

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

可选的

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

有关信息，请参阅此 URL

于 2013-05-24T09:07:04.480 回答
1

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

$(".showdetails", $(this).parent().next()).slideDown();
于 2013-05-24T08:56:25.053 回答
0

我得到了它：

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

感谢大家的帮助。

于 2013-05-24T09:13:37.180 回答