CSS點選隱藏和顯示div效果

admin發表於2018-11-23
CSS

實現此類效果通常結合JavaScript實現，具體參閱點選同一按鈕顯示隱藏切換一章節。

本章節分享一段程式碼例項，它完全由CSS實現，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#box{
  position:relative;
}
#box *:not(#shbox){
  display:inline-block;
}
input{
  position:absolute;
  left:-10000000px;
}
:checked~#shbox{
  display:none;
}
label{
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  border:1px solid green;
  position:absolute;
  left:0px;
  cursor:pointer;
  border-radius:5px;
}
#shbox{
  background:#ccc;
  color:red;
  width:200px;
  height:200px;
  border:1px solid blue;
  box-sizing:border-box;
  padding:50px;
  position:absolute;
  top:50px;
}
</style>
</head>  
<body>
<div id="box">
  <input type="checkbox" id="antzone"/>
  <label for="antzone">顯示/隱藏</label>
  <div id="shbox"></div>
</div>
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.實現原理:

原理非常簡單，首先使用<label>標籤的for屬性和checkbox核取方塊關聯起來。

點選label可以實現核取方塊的選中和非選中狀態，那麼利用這個選中和非選中狀態來控制div元素的顯示和隱藏。

下面程式碼控制隱藏和顯示:

[CSS] 純文字檢視 複製程式碼
:checked~#shbox{
  display:none;
}

二.相關閱讀:

（1）.:not選擇器可以參閱CSS E:not()一章節。

（2）.border-radius可以參閱CSS3實現圓角效果一章節。

（3）.:checked參閱:checked選擇器一章節。

相關文章