Question

我使用了一个javascript通过onclick显示div但是当我点击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>

这是我的完整代码，您可以在计算机上进行测试。

问题是：该功能需要两次点击，我想在点击时显示div（一键）不（双击）

Answer 1

使用此：

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

它应该有用。

Answer 2

问题是el.style.display只读取元素的内联样式，而不是CSS。

因此，首次点击el.style.display为''（空字符串），因此设置为'none'。然后第二次，el.style.display为'none'，因此可行。

如果内联样式为空，则需要尝试从元素的CSS中读取。我将使用quirksmode中的getStyle方法：

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

DEMO：http://jsfiddle.net/JjChY/2/

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

Answer 4

您的代码有点令人费解。它可以写得更简单：

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

Answer 5

如果你有jQuery，你可以在外面点击这样做。

首先，当鼠标在其中时，在“tools”div上设置一个类。当鼠标不在其中时删除该类。

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

然后，跟踪HTML上的点击次数。如果“内部”类不在“工具”div上，则隐藏。

$("html").click( function() {
    $("#tools").not(".inside").each( function() {
        $("#tools").hide();
    });
});

双击以显示div

5 个答案: