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

html と css を含む jsfiddle がここにあります。

私が持っているよりもうまく説明できることを願っています。申し訳ありませんが、説明に惨めに失敗しているため、質問をしてください。

4

4 に答える 4

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

これらの応答を機能させることができませんでした。これは、与えられたコードではなく、私のせいです。よく理解できていなかったのではないでしょうか。

代わりに、別の解決策を見つけました。私の画像は、CSS ではなく HTML で宣言され、次のようになります。

<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 に答える
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

あなたは多かれ少なかれそのようなものが欲しいです:

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 に答える