仅使用 css - select 切换具有特定 class 的下一个元素

Question

我需要在单击触发器（选中复选框）时，内容 (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>

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

Answer 2

使用您发布的代码，您需要做的就是移动 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 能够 "see" 例如这两个元素，把它放在 .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>

仅使用 css - select 切换具有特定 class 的下一个元素

Toggle using only css - select the next element that has a specific class

html

css

css-position