jQuery的崩溃点击展开DIV

我的HTML看起来像jQuery的崩溃点击展开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> 

<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崩溃，不扩大。提前致谢。

来源

2013-05-01 aaviss

它看起来像你第一次滑起来，然后滑动下来的切换：

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

我不知道你想实现什么，但它看起来好像是第一行应走。

来源

2013-05-01 09:49:27 MarioDS

他试图打开他点击了一个前关闭所有其它描述的工作版本 – Bill 2013-05-01 09:50:30

尝试改变/添加类的形象和绑定不同的功能：

$(".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-01 09:49:52 Bill

它折叠和展开，因为你调用slideUp方法所有.description分频器（包括你想要的一个关闭），然后调用slideToggle。

你可以做的就是改变你的第一个.slideUp到不针对:first除法：

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

http://jsfiddle.net/CqC8r/

来源

2013-05-01 09:52:12

这是你的代码：

$(".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>点击。

来源

2013-05-01 09:52:14

下面将做你需要：

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

它可以让你也扩大描述它关闭后。

尝试一下这里： Jfiddle

来源

2013-05-01 09:55:16 HennyH

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

，这里是你的代码中的jsfiddle http://jsfiddle.net/SamirAdel/Fey6T/

来源

2013-05-01 09:55:22

jQuery的崩溃点击展开DIV

回答

相关问题