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看起来像

$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function()  {
   if($(this).attr('class')=='expandstory') {
       $(".description").slideUp(500);
       $(this).parent().nextAll('.description:first').slideToggle(500);
       $(this).attr('src','/images/minus.png');
       $(this).addClass('collapsestory');
       $(this).removeClass('expandstory');
   }
   else {
       $(".description").slideUp(500);
       $(this).attr('src','/images/plus.png');
       $(this).addClass('expandstory');
       $(this).removeClass('collapsestory');
   }
});

我正在制作一个更复杂的简单事物，当我多次展开/折叠div时，这个问题无法解决。

我无法更改HTML文件。请在jquery中为我提供很好的解决方案。提前谢谢。

Answer 1

<强> HTML

<h3><a href="#" title="story title">Story Title</a>
    <img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">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 hide">Short description about the story</div>

<强> CSS：

.show
{
display:block;
}
.hide
{
    display:none;
}

<强> jQuery的：

$('.expandstory').click(function(){       
    $(this).parent().next('.description').toggleClass('show hide');    
});

像这样...... http://jsfiddle.net/writetobhuwan/XqauU/

Answer 2

当你说它“不工作”时，很难理解你的意思。但是你提到它在你多次展开/折叠<div>时停止工作，这让我相信你有动画队列问题，可以用stop()来解决。

试试这个：

$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function()  {
   if($(this).attr('class')=='expandstory') {
       $(".description").stop(true,false).slideUp(500); //Here..
       $(this).parent().nextAll('.description:first').stop(true,false).slideToggle(500); //Here..
       $(this).attr('src','/images/minus.png');
       $(this).addClass('collapsestory');
       $(this).removeClass('expandstory');
   }
   else {
       $(".description").stop(true,false).slideUp(500); //And here..
       $(this).attr('src','/images/plus.png');
       $(this).addClass('expandstory');
       $(this).removeClass('collapsestory');
   }
});

Answer 3

这样的事情应该有效：

$('img.expandstory').click(function() {

    var $this = $(this);
    var $div = $this.parent().next();

    $('img.expandstory').not($this).prop('src', '/images/plus.png');
    $('div.description').not($div).slideUp(500);

    $this.prop('src', ( $div.is(':visible') ? '/images/plus.png' : '/images/minus.png' ));
    $div.slideToggle();

});

Here's a fiddle

注意：在小提琴中，我修改了alt的{{1}}属性，以便您可以看到它发生了变化。

Answer 4

我相信他正在寻找类似的东西：

$('h3').next('.description').hide();
$('h3').first().next('.description').show();
$('h3').click(function(){
    $(this).find('img').toggleClass('.expandstory');
    $('.description').stop().slideUp(500);
    $(this).next('.description').stop().slideDown(500);
});

fiddle

Jquery在单击图像时展开和折叠div

4 个答案:

Here's a fiddle