2

我的 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 折叠而不是展开。提前致谢。

4

6 回答 6

0

以下将按照您的要求进行：

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

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

在这里尝试一下： Jfiddle

于 2013-05-01T09:55:16.560 回答
0 
$(".expandstory").click(function()  {
   $(this).parent().nextAll('.description:first').slideToggle(500);
});

这是您在 jsfiddle http://jsfiddle.net/SamirAdel/Fey6T/中的代码的工作版本

于 2013-05-01T09:55:22.310 回答
0

它会折叠和扩展，因为您正在调用slideUp所有.description分隔符（包括您要关闭的分隔符）的方法，然后调用slideToggle.

您可以做的是将您的第一个更改.slideUp为不针对:first分隔线：

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

http://jsfiddle.net/CqC8r/

于 2013-05-01T09:52:12.217 回答
0

这是你的代码：

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

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

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

于 2013-05-01T09:52:14.533 回答
0

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

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

我不确定你到底想达到什么目标，但看起来第一行应该去。

于 2013-05-01T09:49:27.310 回答
0

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

$(".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');
});
于 2013-05-01T09:49:52.810 回答