0

我正在尝试通过单击网页侧面的栏来显示菜单。

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

jsfiddle 在这里，其中包含 html 和 css。

我希望它在解释方面比我做得更好。带着问题发火，因为我在解释我要道歉的时候惨遭失败。

4

4 回答 4

0

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

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')";
    }
}
于 2013-01-31T17:21:21.260 回答
0

如果您使用 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));
});
于 2013-01-31T17:40:29.777 回答
0

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

    });
于 2013-01-31T18:47:07.673 回答
0

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

相反，我找到了不同的解决方案。我的图像现在在 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>

感谢你的帮助。:)

于 2013-02-01T11:32:20.377 回答