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 回答