Javascript 双击以显示div

我使用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
功能切换（e、id）{
var el=document.getElementById（id）；
el.style.display=（el.style.display='none'）？'block'：'none'；
//留着藏起来吧
toggle.el=el；
//就在这里停止活动
如果（如停止播放）
e、 停止传播（）；
e、 取消气泡=真；
返回false；
}
//在div外部单击
document.onclick=函数（）{
如果（toggle.el）{
toggle.el.style.display='none'；
}
}
#工具{显示：无；}
隐藏分区

这是我的完整代码，你可以在电脑上测试

---

问题是：函数需要两次单击，我希望单击时显示div（一次单击）而不是（双击）

问题是

el.style.display

只读取元素的内联样式，而不是其CSS

因此，在第一次单击时，

el.style.display

是

'

（空白字符串），因此它被设置为“无”。然后第二次，

el.style.display

是

'none'

，所以它可以工作

如果元素的内联样式为空，则需要尝试读取元素的CSS。我将使用来自的

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

演示：

试试这个-

改变

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

到

使用以下命令：

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

---

它应该可以工作。

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

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

变量切换=函数（id）{
var元素=document.getElementById（id）；
element.className=element.className=='hidden'？'''hidden'；
返回false；
};
.隐藏{
显示：无；
}
隐藏分区

如果您有jQuery，您可以为单击外部执行类似的操作

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

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

然后，跟踪HTML上的单击。如果“inside”类不在“tools”div上，则隐藏

---

问题是：这个函数需要两次单击，我想在单击时显示div（一次单击）而不是（双击）。这里有一个例子可以测试：@Rocket它需要双击，而不是一次！！试着刷新页面page@AlaaGamal：我没有解决问题，我只是做了一个示例，以便其他人可以看到问题。@Rocket啊，对不起，谢谢你的帮助。我可以使用toggle（'tools'）；而不是切换（事件，“工具”）@AlaaGamal：不。您需要传递

事件

对象，这样您就可以

e.stopPropagation

。与其添加类，为什么不直接检测单击的元素是否为

#tools

<代码>$（'html'）。单击（e）{if（！$（e.target）.is（'#tools'））{每天学习新东西：-）谢谢你缩短了我的代码，但我想当我点击div外的时候我想隐藏div，你能编辑你的代码来满足我的需要吗？@AlaaGamal你应该能够用你的旧代码和我发布的代码来解决这个问题。我们不是来帮你做工作的。对不起，我不是这个意思，我只是javascript初学者和我虽然我不能把你的代码和我的代码混在一起，但我对我的代码做了很多修改，最后还是失败了！！我想我会继续使用我的旧代码再次感谢你的帮助再次感谢你的代码，它工作得很好，但我需要简短的介绍code@AlaaGamal：你为什么需要“短代码”？我建议你用“正确的方法”，然后再做“短方法”。感谢您解释为什么需要这样做。

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

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