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能够“看到” ，例如这两个元素都放在.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切换-选择下一个具有特定类的元素

2 个答案: