-2

onclickでdivを表示するためにjavascriptを使用しましたが、divの外側をクリックするとdivを非表示にしたいと思います。

さらに検索した後、関数を見つけました。完全に機能します

しかし、問題があります。ダイブを表示するには、コードを最初にダブルクリックする必要があります

私のコード:

<script>
// click on the div
function toggle( e, id ) {
  var el = document.getElementById(id);
  el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';

  // save it for hiding
  toggle.el = el;

  // stop the event right here
  if ( e.stopPropagation )
    e.stopPropagation();
  e.cancelBubble = true;
  return false;
}

// click outside the div
document.onclick = function() {
  if ( toggle.el ) {
    toggle.el.style.display = 'none';
  }
}

</script>
<style>#tools{display:none;}</style>

<div id="tools">Hidden div</div>
<a href="#" onclick="toggle(event, 'tools');">show/hide</a>

これは私の完全なコードです。コンピューターでテストできます。

質問は次のとおりです。関数には2回のクリックが必要です。クリック時にdivを表示したい（ワンクリック）ではなく（ダブルクリック）

4

5 に答える 5

3

これを試してください-http://jsfiddle.net/JjChY/1/

変化する

el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';

に

el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
于 2012-06-26T17:19:15.913 に答える
3

これを使って：

el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';

それはうまくいくはずです。

于 2012-06-26T17:21:40.320 に答える
2

問題はel.style.display、要素の CSS ではなく、要素のインライン スタイルからのみ読み取ることです。

したがって、最初のクリックel.style.displayでは''(空白文字列) であるため、「なし」に設定されます。次に、2回目el.style.displayは です'none'ので、うまくいきます。

インライン スタイルが空白の場合は、要素の CSS から読み取る必要があります。これにはquirksmodegetStyleのメソッドを使用します。

function getStyle(x, styleProp) {
    if (x.currentStyle) {
        var y = x.currentStyle[styleProp];
    }
    else if (window.getComputedStyle) {
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    }
    return y;
}

// click on the div

function toggle(e, id) {
    var el = document.getElementById(id);
    var display = el.style.display || getStyle(el, 'display');
    el.style.display = (display == 'none') ? 'block' : 'none';

    // save it for hiding
    toggle.el = el;

    // stop the event right here
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    return false;
}

// click outside the div
document.onclick = function() {
    if (toggle.el) {
        toggle.el.style.display = 'none';
    }
}​

デモ: http://jsfiddle.net/JjChY/2/

于 2012-06-26T17:17:45.180 に答える
0

jQuery をお持ちの場合は、外側のクリックに対して次のようなことができます。

まず、マウスがその中にあるときに「ツール」divにクラスを設定します。マウスがクラス内にないときにクラスを削除します。

$('#tools').hover( function() {
    $('#tools').addClass("inside");
},
function() {
    $('#tools').removeClass("inside");
});

次に、HTML のクリックを追跡します。「内部」クラスが「ツール」div にない場合は非表示にします。

$("html").click( function() {
    $("#tools").not(".inside").each( function() {
        $("#tools").hide();
    });
});
于 2012-06-26T17:27:56.253 に答える
0

あなたのコードは少し複雑です。もっと簡単に書くことができます：

<script>
var toggle = function(id) {
  var element = document.getElementById(id);
  element.className = element.className === 'hidden' ? '' : 'hidden';

  return false;
};
</script>

<style>
.hidden {
    display: none;
}
</style>

<div id="tools" class="hidden">Hidden div</div>
<a href="#" onclick="toggle('tools');">show/hide</a>
于 2012-06-26T17:25:40.313 に答える