当你点击body时隐藏元素html

我有这段代码，一切正常，我想让所有元素＃content1，＃content2 ..当点击正文时隐藏。我试着用z-index比格小设定的身体，而它并没有帮助当你点击body时隐藏元素html

$(function() { 
 
      $('#div1').click(function() { 
 
      $('#content1, #content2, #content3').hide(); 
 
      $('#content1').show(); 
 
      /* other code ..*/ 
 
      }); 
 

 
      $('#div2').click(function() { 
 
      $('#content1, #content2, #content3').hide(); 
 
      $('#content2').show(); 
 
      /* other code ..*/ 
 
      }); 
 
    });

html,body{width:100%;height:100%;} 
 

 
    #div1, #div2, #div3{ 
 
      overflow:hidden; 
 
      float:left; 
 
      width:40px; 
 
      height:40px; 
 
      background:red; 
 
      margin:0 10px 0 0; 
 
     } 
 
     #content1, #content2, #content3{ 
 
     overflow:hidden; 
 
     position:absolute; 
 
     top:50px; 
 
     background-color:#000; 
 
     color:#fff; 
 
     padding:2px 4px; 
 
    }

<!doctype html> 
 
<html> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <div id="div1"> 
 
      <div id="content1" style="display: none;"> 
 
      text1 
 
      </div> 
 
     </div> 
 
     <div id="div2"> 
 
      <div id="content2" style="display: none;"> 
 
      text2 
 
      </div> 
 
     </div> 
 
     <div id="div3"> 
 
      <div id="content3" style="display: none;"> 
 
      text3 
 
      </div> 
 
     </div> 
 
</body> 
 
</html>

来源

2017-04-07 Wojtek

你有这里的问题是，如果'div'的内容是隐藏的，那么你就无法点击它，使他们再次可见 –

另外请注意，我改变了你的标题和描述问题。 “关闭”和“禁用”与您的代码使用的隐藏/显示逻辑非常不同。 –

试试这个：

$(function() { 
 
    var div1 = $("#div1"); 
 
    var div2 = $("#div2"); 
 
    var div3 = $("#div3"); 
 
    $("body").on("click", function (e) { 
 
     if (div1.has(e.target).length || e.target == div1[0]) 
 
      return; 
 
     else if (div2.has(e.target).length || e.target == div2[0]) 
 
      return; 
 
     else if (div3.has(e.target).length || e.target == div3[0]) 
 
      return; 
 
     $('#content1, #content2, #content3').hide(); 
 
    }); 
 
});

html,body{width:100%;height:100%;}

<div id="div1"> 
 
    <div id="content1"> 
 
    text1 
 
    </div> 
 
</div> 
 
<div id="div2"> 
 
    <div id="content2"> 
 
    text2 
 
    </div> 
 
</div> 
 
<div id="div3"> 
 
    <div id="content3"> 
 
    text3 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

来源

2017-04-07 12:32:59 Jessika

我试过当我点击每个元素包括＃div1元素都隐藏，我只想点击正文 – Wojtek

试试这个：'$（function（）{ var div1 = $（“＃div1”）; var div2 = $（“＃div2”）; var div3 = $（“＃div3”）; $（“body”）。on（“click”，function（e）{div1.has（e。目标）.length || e.target == div1 [0]） return; else if（div2.has（e.target）.length || e.target == div2 [0]） return; else if（div3.has（e.target）.length || e.target == div3 [0]） return; $（'＃content1，＃content2，＃content3'）。hide（）; }）; }） ' – Jessika

谢谢你的帮助 – Wojtek

你的代码，你说的是两个不同的东西。所以：

如果你只是想隐藏，当你点击body所有#content元素，遵循杰西卡的答案。
如果你想隐藏的所有#content元素，除了你点击#content元素（即当你点击#content1，你要隐藏#content2和#content3），你可以简单地做这样的事情：
```
$(function() { 
    $('#div1').click(function() { 
     $('#content2, #content3').hide(); 
     /* other code ..*/ 
    }); 

    $('#div2').click(function() { 
     $('#content1, #content3').hide(); 
     /* other code ..*/ 
    }); 

    /* other code */ 
}); 
```
而不是隐藏和显示的内容，你可以让它保持不变，只隐藏其他内容。

来源

2017-04-07 13:09:57

当你点击body时隐藏元素html

回答

相关问题