Question

我正在尝试点击我网页侧栏上的菜单显示。

我有一个可点击的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';
}

The jsfiddle is here with the html and css in.

我希望它能比我更好地解释。带着问题解雇，因为我惨遭解释我为此道歉。

Answer 1

你想要或多或少的东西：

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')";
    }
}

Answer 2

如果您使用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));
});

Answer 3

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

    });

Answer 4

我无法得到任何响应，这是我的错，而不是我给出的代码。我可能不太了解它。

我找到了另一种解决方案。我的图像现在在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";
    }
}

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

感谢您的帮助。：）

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

4 个答案: