用HTML和CSS實現點擊內容顯示再點擊隱藏

實現思路：

1.display:none,隱藏元素;點擊時display:black;

2.設置隱藏元素高度為0，overflow:hidden;點擊時overflow:visible;

由於第一條只能實現點擊時顯示，不能實現繼續隱藏；排除方法1。

考慮復選框特性，點擊時樣式框內有小勾，再點擊時小勾消失。

 

HTML實現代碼：

  <div>
        <input type="checkbox" id="dianji">
        <label for="dianji">
            點擊
        </label>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
　　　　　　　Commodi optio sed eligendi repudiandae. Sequi debitis, totam, praesentium laudantium numquam eum 
            voluptatibus non eligendi saepe animi quibusdam delectus ab nostrum, perferendis libero eaque
            magnam officia aperiam! Voluptate nam dolorem eligendi, quasi harum deserunt. 
            Quibusdam eveniet delectus optio deleniti maiores libero incidunt?
        </p>
        
    </div>

CSS實現代碼：

p{
    border: 1px solid red;
    height: 0px;
   /* display: none; */
   overflow: hidden;

}

input:checked~p{
    /* display: block; */
    overflow: visible;
}