Question

我有一个DIV在点击时会展开或折叠。有一个+号表示它会展开，它会变为 - 符号表示您可以折叠它。而不是+和 - 符号，我想使用向上和向下箭头。

jsfiddle here：http://jsfiddle.net/9PzRr/

我将.text更改为.html并插入上/下箭头的unicode值代替+和 - 符号，但只显示向下箭头。我愿意使用图像而不是ASCII字符，但我不熟悉Javascript / jQuery，知道如何告诉它显示图像而不是文本。

感谢您的帮助。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
    <h4 id="expanderHead" style="cursor:pointer;">
    EXPANDING COLLAPSING DIV <span id="expanderSign">&#x25BC;</span>
    </h4>
    <div id="expanderContent" style="display:none">
        content<br />
        content<br />
        content<br />
        content<br />
        content<br />
    </div>
    </body>
</html>    


$(document).ready(function() {
    $("#expanderHead").click(function() {
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "▼") {
            $("#expanderSign").html("▲")
        }
        else {
            $("#expanderSign").text("▼")
        }
    });
});

http://jsfiddle.net/diode/9PzRr/1/

或者您可以在javascript代码中编写以下内容

 String.fromCharCode(0x25BC)
 String.fromCharCode(0x25B2)

建议使用CSS背景样式并切换它以获得此功能。

Answer 2

$(document).ready(function() {
    $("#expanderHead").click(function() {
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "\u25BC") {
            $("#expanderSign").html("\u25B2")
        }
        else {
            $("#expanderSign").text("\u25BC")
        }
    });
});

修改JavaScript以使用ASCII字符或图像而不是文本

2 个答案: