使用javascript替换图像？_Javascript_Slidetoggle

使用javascript替换图像？

javascript

使用javascript替换图像？,javascript,slidetoggle,Javascript,Slidetoggle,目前，在我的网站上，我有一些javascript，它将[+]更改为[-]，然后在下拉菜单上再次更改，具体取决于它是打开的还是关闭的，我希望用图像来代替它。例如，当菜单关闭时有一个向右的小箭头，当菜单打开时有一个向下的小箭头。如何修改以下javascript来实现这一点？谢谢示例如下：假设.refine_图标是一个img标签，请使用以下功能： function modifyState() { var el = $("roll1"); var elIco = $("rollIc

目前，在我的网站上，我有一些javascript，它将[+]更改为[-]，然后在下拉菜单上再次更改，具体取决于它是打开的还是关闭的，我希望用图像来代替它。例如，当菜单关闭时有一个向右的小箭头，当菜单打开时有一个向下的小箭头。如何修改以下javascript来实现这一点？谢谢

示例如下：

假设.refine_图标是一个img标签，请使用以下功能：

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>


书名
卷内容

正如roman和Sasan所说，您可以使用JavaScript更改图像源代码，但也可以使用CSS类更改图像源代码（考虑到它是一个下拉菜单，图像不应与其相邻的按钮分开编制索引，这可能是最好的方法）：

还有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>


.u图标{
显示：内联块；
左侧填充：20px；
背景：透明url（../path/to/your/image）左上方无重复滚动；
}
.refine_图标已打开{
背景：透明url（../path/to/your/image2）左中心无重复滚动；
/*或者，如果您使用的是精灵，只需更改位置*/
/*背景位置：左下*/
}

Currenty refine_图标是一个div。。。[+]. 我会这样改变它：是的，或者在你的帮助下，我会这样做：结合slideToggle和toggleClass。谢谢

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

$(".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");
            }
        });
});

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