Question

我有15个默认隐藏的div。一旦我点击与每个按钮关联的每个按钮，它就会显示出来，并通过单击每个相关按钮隐藏它们。现在我想要的是：如果我点击除了div之外的文档上的任何地方，并且如果任何div已经可见，那么一旦我在div外面点击它就应该立即隐藏，依此类推。我通过使用它来克服这个问题如果有一个我希望玩的div，则仅以下的代码。

function check(e){
   var target = (e && e.target);
   var obj = document.getElementById('myDiv');
   checkParent(target)?obj.style.visibility="hidden":null;
   }
function checkParent(t)
  {
          if(t==document.getElementById('myDiv'))
          {
             return false;
          }
          return true;      
  }

如果至少有两个以上的div我想操纵上面提到的方式，那么理想的解决方案是什么？Divs有一个类说“cmnClass”。我试过这个（但是徒劳无功）：

if(t.className!="cmnClass")
   {
     e = document.getElementsByTagName('div'); 
      for(var i=0;i<e.length;i++) 
      {
       if(e[i].className=="cmnClass") 
        e[i].style.visibility="hidden";
      } 
   }

预计一个好的解决方案也会更快

Answer 1

如果你可以使用jquery，可以这样做。我刚刚创建了一个fiddle来演示。

$(document).click(function (e)
{
     var element = $(".mydivclass");

   if (!element.is(e.target)
    && element.has(e.target).length === 0) 
{

    element.toggle();
}

}）;

解释：

if (!element.is(e.target)

检查它是否是被点击的DIV元素

element.has(e.target).length === 0

检查DIV中是否有任何被点击的元素。

如果没有，它会切换DIV的可见性。

如果你不想使用切换，你可以很好地设置css属性。

element.css("display","none");

Answer 2

如果你可以使用jQuery，那么你可以为每个DIV分配一个类，让脚本知道它是一个可以切换的DIV。当点击容器DIV的“背景”时，这将用于隐藏。

您的问题的其他部分可以通过siblings()方法解决，但您必须使用某种结构。

例如，如果您的内容结构如下

<div id="main-container">
    <div class="element-container">
        <div class="content">Some text</div>
        <div class="button">Clickable DIV</div>
    </div>
    <div class="element-container">
        <div class="content">Some other text</div>
        <div class="button">Clickable DIV</div>
    </div>
    <div class="element-container">
        <div class="content" hidden>Third text</div>
        <div class="button">Clickable DIV</div>
    </div>
</div>

然后使用适当的CSS样式，您可以通过此jQuery代码实现所请求的行为：

编辑：

$(".button").click(function(){
    $(this).siblings(".content").toggle();
});

$(document).click(function(e){
    if(!$(".element-container").is(e.target) 
        && $(".element-container").has(e.target).length === 0)
    {
        $(".content").hide();
    }
});

jsFiddle

请求编辑：

三等号是一个严格的比较器 - 见this documentation。因此，行$(".element-container").has(e.target).length === 0)会检查has按钮和内容has中的容器是否也是当前点击的目标（e.target）。在这种情况下，它与零，所以如果没有，则返回true。

单击鼠标切换div

2 个答案: