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

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

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

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

感谢您的任何帮助。

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

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

相关内容

最新更新

热门标签：