Jquery在点击时折叠展开的div答案

【问题标题】：Jquery to collapse expanded div on clickJquery在点击时折叠展开的div
【发布时间】：2013-05-01 09:45:55
【问题描述】：

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

【问题讨论】：

标签： jquery html

【解决方案1】：

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

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

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

【讨论】：

他正在尝试关闭所有其他描述，然后再打开他点击的描述

【解决方案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');
});

【讨论】：

【解决方案3】：

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

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

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

http://jsfiddle.net/CqC8r/

【讨论】：

【解决方案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); 行，然后您可以切换与单击的 <h3>/<img> 对应的 .description 元素。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

在这里试试： Jfiddle

【讨论】：