如何使用javascript通过onclick隐藏div？答案

【问题标题】：How to hide div by onclick using javascript?如何使用javascript通过onclick隐藏div？
【发布时间】：2011-03-11 19:01:16
【问题描述】：

我使用 javascript 通过 onclick 显示 div，但是当我单击 div 外部时，我想隐藏 div。如何在javascript中做到这一点？我正在使用javascript代码..

<a href="javascript:;" onClick="toggle('one');">  

function toggle(one)
{
    var o=document.getElementById(one);

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

【问题讨论】：

标签： javascript onclick hide

【解决方案1】：

HTML

<a href="#" onclick="toggle(event, 'box');">show/hide</a>

Javascript

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

【讨论】：

【解决方案2】：

使用 jQuery，这将很简单：

$("button.hide").click(function(event){ $("div.hidethis").hide() });

【讨论】：

【解决方案3】：

当你点击其他地方时，你可以使用 blur() 函数

$("#hidelink").click(function() {
    $("#divtoHide").show();
});

$("#hidelink").blur(function() {
    $("#divtoHide").hide();
});

【讨论】：