Question

我有这些元素：

<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle">
<ul class="tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Organizations</a></li>
    <li><a href="#">Take Action</a></li>
    <li><a href="#">Resourses</a></li>
    <li><a href="#">Contact</a></li>
</ul>

和css：

.tabs{display:none}

#toggle:checked+ .tabs{
        display:block
}

我也尝试过：

#toggle:checked~ .tabs{
    display:block
}

但它仍然没有显示隐藏的<ul class="tabs">

Answer 1

改为定位您的输入。

＆＃13;

.tabs {
  display: none;
}

input[type=checkbox]:checked ~ .tabs{
    display: block;
}

＆＃13;

<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle">
<ul class="tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Organizations</a></li>
  <li><a href="#">Take Action</a></li>
  <li><a href="#">Resourses</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

Answer 2

试试这个。

.tabs{
    display:none
}

#toggle:checked + .tabs{
    display:block
}

间距有所不同。

Answer 3

.tabs {
  display: none;
}

#toggle:checked + .tabs {
  display: block;
}

这对我有用。

Answer 4

因为演示片段无法插入评论......

您的代码有效，测试下面的代码：

CSS

#toggle:checked + .tabs{
   display:block
}

.tabs{display:none}

#toggle:checked + .tabs{
        display:block
}

<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle">
<ul class="tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Organizations</a></li>
    <li><a href="#">Take Action</a></li>
    <li><a href="#">Resourses</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#toggle:checked ~ .tabs{
   display:block
}

.tabs {
  display: none
}

#toggle:checked~.tabs {
  display: block
}

<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle">
<ul class="tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Organizations</a></li>
  <li><a href="#">Take Action</a></li>
  <li><a href="#">Resourses</a></li>
  <li><a href="#">Contact</a></li>
</ul>

你的问题还有其他地方:( 请用实际显示问题的代码来澄清问题。

使用css检查复选框时如何显示隐藏的ul？

4 个答案: