0

現在私のウェブサイトには、[+]を[-]に変更し、開いているか閉じているかに応じてドロップダウンメニューに戻るjavascriptがあります。代わりに、画像を使用して実行したいと思います。たとえば、メニューが閉じているときは小さな右向きの矢印で、メニューが開いているときは小さな下向きの矢印です。これを実現するために次のJavaScriptを変更するにはどうすればよいですか？ありがとう

ここでの例：jsfiddle

$(".refine_button").click(function(){
        var butt = $(this);
        $(this).next(".refine_block").slideToggle("normal", function(){
                if ($(this).css("display") == "block") {
                    butt.children(".refine_icon").html("[-]");
                } else {
                    butt.children(".refine_icon").html("[+]");
                }
            });
    });
4

3 に答える 3

1 
$(".refine_button").click(function(){
    var butt = $(this);
    $(this).next(".refine_block").slideToggle("normal", function(){
            if ($(this).css("display") == "block") {
                butt.children(".refine_icon").attr('src', 'url to your image');
            } else {
                butt.children(".refine_icon").attr('src', 'url to your other image');
            }
        });
});

.refine_iconがimgタグであると仮定します

于 2011-01-09T11:43:40.633 に答える
1

roman と Sasan が言ったように、JavaScript で画像ソースを変更できますが、CSS クラスでもこれを行うことができます (おそらく、これがドロップダウン メニューであり、画像が隣接するボタンとは別にインデックス化されるべきではないことを考えると、最良の方法です):

$(".refine_button").click(function(){
    var butt = $(this);
    $(this).next(".refine_block").slideToggle("normal", function(){
            if ( $(this).hasClass("opened") ) {
                butt.children(".refine_icon").removeClass("opened");
            } else {
                butt.children(".refine_icon").addClass("opened");
            }
        });
});

そしてCSS...

<style type="text/css">
.refine_icon {
     display: inline-block;
     padding-left: 20px;
     background: transparent url(../path/to/your/image) left top no-repeat scroll;
}
.refine_icon.opened {
     background: transparent url(../path/to/your/image2) left center no-repeat scroll;
     /* or if you are using a sprite simply change the position... */
     /* background-position: left bottom; */
}
</style>
于 2011-01-09T12:09:18.283 に答える
0

次の関数を使用します。

function modifyState() {
    var el = $("roll1");
    var elIco = $("rollIcon1"); // img tag with id="rollIcon1"

    if (el.style.display == "none") {
        el.style.display = "";
        elIco.src = elIco.src.replace("LArrow", "BArrow");
    } else {
        el.style.display = "none";
        elIco.src = elIco.src.replace("BArrow", "LArrow");
    }
}

function load() {
    $("rollTitle1").onclick = function () { modifyState(); };
}

次の html コードの場合:

<html onload="load();">
    <table>
    <tr id="rollTitle1">
        <td><img src="Img/BArrow.png" id="rollIcon1" />Roll Title</td>
    </tr>
    <tr id="roll1">
        <td>Roll Content</td>
    </tr>
    </table>
</html>
于 2011-01-09T11:57:38.890 に答える