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

【问题标题】：Jquery to expand and collapse div on clicking a imageJquery在单击图像时展开和折叠div
【发布时间】：2022-02-05 13:03:35
【问题描述】：

我的 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 中为我提供好的解决方案。提前致谢。

【问题讨论】：

创建一个jsFiddle。另外，定义'不工作'
它的 jsFiddle.net 我猜.. :/
哎呀..我着急了。

标签： javascript jquery html

【解决方案1】：

当您说它“不起作用”时，很难理解您的意思。但是您提到当您多次展开/折叠<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');
   }
});

【讨论】：

【解决方案2】：

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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这样的事情应该可以工作：

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

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

【讨论】：