當你點擊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

回答

相關問題