切換css3未運行

Question

我正在嘗試使用css3進行切換，但無法正常工作。 有人有解決辦法嗎？ 為什么在這種情況下不能使用input:checked ~ ？

這是我的代碼： https : //codeshare.io/axvvZB

Answer 1

.show-more #toggle:checked ~ .toggle-content { ... }

僅當div.toggle-content是div.show-more子div.show-more並放置在HTML代碼中的input#toggle之后時，以上選擇器才div.toggle-content 。

您的代碼結構應為：

<div class="show-more">
  <label for="toggle">VIEW ALL</label>
  <input id="toggle" type="checkbox" style="visibility:hidden">
  <div class="toggle-content">
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <div class="fade"></div>
  </div>
</div>

 .toggle-content { height:5px; overflow: hidden; transition:all 1s linear; } .toggle-content .fade { bottom: -20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0 rgba(0, 0, 0, 0); height: 100px; position: absolute; width: 100%; display: inline-block; } .show-more { margin: 10px auto; padding: 10px; border-radius: 6px; text-align: center; color: #fff; display: block; background: #2196F3; } .show-more label { color: #fff!important; text-decoration: none; cursor: pointer; } .show-more #toggle:checked ~ .toggle-content{ height:auto } 

 <div class="show-more"> <label for="toggle">VIEW ALL</label> <input id="toggle" type="checkbox" style="visibility:hidden"> <div class="toggle-content"> <p>Content here</p> <p>Content here</p> <p>Content here</p> <p>Content here</p> <p>Content here</p> <div class="fade"></div> </div> </div> 

Answer 2

您正在使用CSS（ ~ ）中的同級選擇器，但標記中的元素不是input元素的同級。

您必須將.toggle-content設置為#toggle的兄弟，才能使其正常運行。

參考代碼：

 .toggle-content { height: 5px; overflow: hidden; transition: all 1s linear; } .toggle-content .fade { bottom: -20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0 rgba(0, 0, 0, 0); height: 100px; position: absolute; width: 100%; display: inline-block; } .show-more { margin: 10px auto; padding: 10px; border-radius: 6px; text-align: center; color: #fff; display: block; background: #2196F3; } .show-more label { color: #fff!important; text-decoration: none; cursor: pointer; } .show-more #toggle:checked ~ .toggle-content { height: auto } 

 <div class="show-more"> <label for="toggle">VIEW ALL</label> <input id="toggle" type="checkbox" style="visibility:hidden"> <div class="toggle-content"> <p>Content here</p> <p>Content here</p> <p>Content here</p> <p>Content here</p> <p>Content here</p> <div class="fade"></div> </div> </div>