-2

我使用 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（单击）而不是（双击）

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是''（空白字符串），所以它设置为“无”。然后第二次，el.style.displayis '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

你的代码有点复杂。它可以写得更简单：

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