Question

我的Html看起来像

<h3><a href="#" title="story title">Story Title</a>
    <img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>

<h3><a href="#" title="story title">Story Title</a>
    <img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>

我的jquery看起来像

$(".expandstory").click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png');
});

一切正常。但是当我点击减号时，div会折叠并再次展开。如何使div崩溃而不是扩展。提前谢谢。

Answer 1

看起来你先将它向上滑动，然后通过切换滑动它：

$(".description").slideUp(500); // Slide up
$(this).parent().nextAll('.description:first').slideToggle(500); // slide down

我不确定你到底想要实现的目标，但看起来好像第一行应该去了。

Answer 2

尝试更改/添加类到图像并绑定不同的函数：

$(".expandstory").not('.close').click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png').addClass('close');
});
$(".expandstory.close").click(function()  {
   $(".description").slideUp(500);
   $(this).attr('src','/images/plus.png').removeClass('close');
});

Answer 3

它会崩溃并展开，因为您正在调用slideUp方法的所有.description分隔符（包括您想要关闭的分隔符），然后调用slideToggle。

您可以做的是将您的第一个.slideUp更改为而不是定位:first分隔符：

$(".description")
    .not($(this).parent().nextAll('.description:first')).slideUp(500);

http://jsfiddle.net/CqC8r/

Answer 4

这是你的代码：

$(".expandstory").click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png');
});

前两行与相应的.description元素交互两次。一旦选择了所有这些并向下滑动，然后再次只获取下一个.description元素 - 然后再调用.slideToggle()，它会再次向下滑动（因为它已经上升）。

我建议您的初始状态是所有描述都已关闭，这样您就不需要$(".description").slideUp(500);行，然后您只需切换与.description对应的<h3>/<img>元素点击了。

Answer 5

以下将按您的要求执行：

 <script>
 $(function() {
     $(".expandstory").click(function()  {
         $(this).parent().next("div").slideToggle(500);
     });
 });
 </script>

它允许您在关闭后扩展描述。

在这里试试： Jfiddle

Answer 6

$(".expandstory").click(function()  {
   $(this).parent().nextAll('.description:first').slideToggle(500);
});

以下是jsfiddle http://jsfiddle.net/SamirAdel/Fey6T/

中代码的工作版本

Jquery在点击时折叠展开的div

6 个答案: