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 に答える