0

My Html looks like

<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>

My jquery looks like

$('.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');
   }
});

I am making a simple thing more complex and more over this is not working when I expand/collapse the div multiple times.

I cannot change the HTML file. Please provide me good solution in jquery. Thanks in advance.

4

4 回答 4

0

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/

于 2013-05-02T15:10:20.597 回答
0

当您说它“不起作用”时，很难理解您的意思。但是您提到当您<div>多次展开/折叠 s 时它会停止工作，这让我相信您有动画队列问题，可以使用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');
   }
});
于 2013-05-02T15:18:22.567 回答
0

像这样的东西应该工作：

$('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();

});

这是一个小提琴

注意：在小提琴中，我修改了just 的alt属性，image以便您可以看到它的变化。

于 2013-05-02T15:21:30.963 回答
0

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

$('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);
});

小提琴

于 2013-05-02T15:22:05.133 回答