仅使用CSS切换-选择下一个具有特定类的元素

时间:2018-07-20 06:50:06

标签: html css css3 css-position

我需要单击“触发器”(选中复选框)时,内容(ul)以水平列表的形式显示在包装器的下方(红色和蓝色)。

看起来+(下一个)不起作用,因为即使下一个元素也位于另一个父元素中。

.wrapper {
  position: relative;
  height: 130px;
  background: red;
}

.lp {
  color: $white;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  background: blue;
}

.lp .toggle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}

.trigger { display:none;}

.content {
  display: none;
}
  
.trigger:checked + .content {
    display: block;
}
<div class="wrapper">
   <div class="lp">
        <div class="toggle">
            <label for="menu-toggle">
                <span>Trigger</span>
            </label>
            <input type="checkbox" class="trigger" id="menu-toggle"/>
        </div>
    <ul class="content">
        <li><a href="#">First link</a></li>
        <li><a href="#">Second link</a></li>
        <li><a href="#">Third link</a></li>
    </ul>
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

已更新。所以我做了一个快速演示。希望这足以使您前进:)

.checkbox:not(checked) {
    display: none;
}

.checkbox:not(checked) ~ .content {
    display: none;
}
.checkbox:checked ~ .content {       
    display: block;
}
<div class="wrapper">
  <div class="lp">
      <input type="checkbox" value="selected" id="1" class="checkbox"/>
      <label for="1" >Trigger</label>
    <ul class="content">
      <li><a href="#">First link</a></li>
      <li><a href="#">Second link</a></li>
      <li><a href="#">Third link</a></li>
    </ul>
  </div>
</div>

答案 1 :(得分:1)

使用已发布的代码,您要做的就是移动input,使其成为ul的上一个兄弟。

adjacent sibling selector +可以正常工作并切换隐藏菜单

堆栈片段

.wrapper {
  position: relative;
  height: 150px;
  background: red;
}

section {
  position: relative;
}
  section .content {
    background: yellow;
    padding: 20px;
  }

.lp {
  color: $white;
  position: absolute;
  height: 100%;
  width: 100px;
  top: 0;
  right: 0;
  background: lightblue;
}

.lp .toggle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}
.lp .content {
  position: relative;
  transform: translateY(15px);
  padding-left: 18px;
  list-style: none;
}

.content, .trigger {
  display: none;
}

.trigger:checked+.content {
  display: block;
}
<div class="wrapper">
  <div class="lp">
    <div class="toggle">
      <label for="menu-toggle">
                <span>Trigger</span>
            </label>
    </div>
    <input type="checkbox" class="trigger" id="menu-toggle" />
    <ul class="content">
      <li><a href="#">First link</a></li>
      <li><a href="#">Second link</a></li>
      <li><a href="#">Third link</a></li>
    </ul>
  </div>
</div>


如评论中所述,如果您的内容是.wrapper的同级内容,并且还需要切换,则可以使用general sibling selector ~

为了使input能够“看到” ,例如这两个元素都放在.wrapper之前。

堆栈片段

.wrapper {
  position: relative;
  height: 150px;
  background: red;
}

section {
  position: relative;
}
  section .content {
    background: yellow;
    padding: 20px;
  }

.lp {
  color: $white;
  position: absolute;
  height: 100%;
  width: 100px;
  top: 0;
  right: 0;
  background: lightblue;
}

.lp .toggle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}
.lp .content {
  position: relative;
  transform: translateY(15px);
  padding-left: 18px;
  list-style: none;
}

.content, .trigger {
  display: none;
}

.trigger:checked ~ .wrapper .content,
.trigger:checked ~ section .content {
  display: block;
}
<input type="checkbox" class="trigger" id="menu-toggle" />
<div class="wrapper">
  <div class="lp">
    <div class="toggle">
      <label for="menu-toggle">
                <span>Trigger</span>
            </label>
    </div>
    <ul class="content">
      <li><a href="#">First link</a></li>
      <li><a href="#">Second link</a></li>
      <li><a href="#">Third link</a></li>
    </ul>
  </div>
</div>


<section>
  <div class="content">
    Some other dummy text that will show...
  </div>
</section>