用jquery扩展div，用按钮切换答案

【问题标题】：Expanding div with jquery, toggle with buttons用jquery扩展div，用按钮切换
【发布时间】：2014-09-21 19:34:47
【问题描述】：

我有一个很好的工作脚本，您可以在其中使用两个“文本”按钮展开和折叠 div。我想用一张图片替换它们以展开 (expand.png) 和另一个用于折叠 (collapse.png)。

<script type="text/javascript">
$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
         }
        else {
            $("#expanderSign").text("+")
        }
    });
});

似乎无法弄清楚如何在代码中实现 img...如果任何人可以提供帮助，那就太棒了！

【问题讨论】：

也许您可以在小提琴中托管您的 html/js 演示以获得结果。现在我们不知道您对 expanderSign 使用什么，但我们的想法是使用 div 并使用 jQuery 更改其背景图像，而不是更改文本
为什么 2 个按钮用于 1 个切换？切换通常只使用 1 个按钮。
如果 div 被展开，按钮的外观会变成“向上类型”。当它被折叠时，它会变成“向下类型”。

标签： jquery html toggle collapse expand

【解决方案1】：

假设您的#expanderHead 是<img>，那么您可以像下面这样更改源：

$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").attr("src") == "expand.png"){
            $("#expanderSign").attr("src","collapse.png");
        }
        else {
           $("#expanderSign").attr("src","expand.png");
        }
    });
});

【讨论】：