使用Javascript或JQuery在单击时显示/隐藏，并更改图像

我试图有一个菜单显示在我的网页边上的一个酒吧点击

我有一个可点击的div，可以隐藏或显示已经存在的内容

然而，我也希望图像在点击时改变，我不知道如何做到这两个。目前，我在CSS代码中声明了背景图像，但我知道这可能需要更改

这是我到目前为止使用的javascript：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

---

我希望它比我解释得更好。问个不停，因为我很难解释，为此我道歉

你或多或少想要这样的东西：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block'){
        e.style.display = 'none';
        e.style.background-image = "url('path')";
    }else{
        e.style.display = 'block';
        e.style.background-image = "url('path')";
    }
}

---

如果您正在询问jquery的解决方案：

function toggle_visibility(content, current) {
  var e = $(content);
  var curr = $(current);
  if (e.css('display') == 'block') {
      e.css('display', 'none');
      curr.css('background','red');
  } else {
      e.css('display', 'block');
      curr.css('background','#3E3E3E');
  }
}

$('#float a').click(function () {
    toggle_visibility($('#contents'), $(this));
});

jquery方法

<div id="float" style="background-color: Red">
        <a id="linkID" href="#">link</a>
    </div>
    <div id="contents" style="background-color: Blue">
        contents
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#linkID").click(function () {
            $("#contents").toggle();
            if ($("#contents").is(':visible') === true) {
                $("#float").css("background-color", "green");
            } else {
                $("#float").css("background-color", "black");
            }
        });

    });

目录
$（文档）.ready（函数（）{
$（“#linkID”）。单击（函数（）{
$（“#内容”）.toggle（）；
如果（$（“#内容”）。为（'：可见'）==真）{
$（“#float”）.css（“背景色”、“绿色”）；
}否则{
$（“#float”）.css（“背景色”、“黑色”）；
}
});
});

我无法得到任何工作响应，这是我的错，而不是给我的代码。我可能不太明白

相反，我找到了一个不同的解决方案。我的图像现在在HTML中声明，而不是在CSS中声明，如下所示：

<script type="text/javascript">
function toggleVisibility(divID, imgID)
{
    if (document.getElementById(divID).style.display == "block") 
    {
        document.getElementById(divID).style.display = "none";
        document.getElementById(imgID).src = "images/contents2.png";
    } 
    else 
    {
        document.getElementById(divID).style.display = "block";
        document.getElementById(imgID).src = "images/contents1.png";
    }
}

功能切换可见性（divID、imgID）
{
if（document.getElementById（divID.style.display==“block”）
{
document.getElementById（divID）.style.display=“无”；
document.getElementById（imgID.src=“images/contents2.png”；
} 
其他的
{
document.getElementById（divID）.style.display=“block”；
document.getElementById（imgID.src=“images/contents1.png”；
}
}

目录

---

谢谢你的帮助。：）

您已经完成的代码是普通javascript，与jquery无关。那么，您正在寻找jquery或纯javascript解决方案吗？

e.style.backgroundImage='which'

不满足您的需要吗？对不起，javascript或jquery都可以。我试过e.style.backgroundImage=但没能让它做我想做的。。。这可能只是我的经验不足，我想他说的是CSS中的背景图像，而不是IMG元素。

<div id="float">
    <a href="#" onclick="toggleVisibility('contents','contentsImg')">
    <img id="contentsImg" src="images/contents2.png" onclick="toggleVisibility('showDiv',this.id)"/></a>
</div>

<div id="contents">
    contents
</div>