切换css3没有运行

Question

我正在尝试与css3切换，但它无法正常工作。有人有解决方案吗？为什么我不能在这种情况下使用input:checked ~？

这是我的代码：https://codeshare.io/axvvZB

Answer 1

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

  

只有当div.toggle-content成为div.show-more的孩子并放置时，上方选择器才有效   在HTML代码中input#toggle之后。

您的代码结构应为：

<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>

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在使用css（~）中的兄弟选择器，但标记中的元素不是input元素的兄弟。

您必须.toggle-content #toggle的兄弟姐妹才能让它发挥作用。

参考代码：

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;