1

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

jsfiddle在这里：http: //jsfiddle.net/9PzRr/

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

谢谢你的帮助。

4

2 回答 2

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 背景样式并切换它来获取它。

于 2012-08-17T16:12:31.517 回答
1 
$(document).ready(function() {
    $("#expanderHead").click(function() {
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "\u25BC") {
            $("#expanderSign").html("\u25B2")
        }
        else {
            $("#expanderSign").text("\u25BC")
        }
    });
});​
于 2012-08-17T16:15:40.053 回答