Question

我试图使用复选框和标签来点击导航系统。我从来没有在标签和复选框周围玩过多，除了他们想要用于w3c的内容。这是我设法将其放入的最小代码：

＆＃13;

.bar{
  list-style-type:none;
}
.bar ul{
  display:none;
}
.bar input[type=checkbox]{
  display:none;
}
label:hover{
    cursor:pointer;
}
input[type=checkbox]:checked + label{
  color:blue;
}
input[type=checkbox]:checked + ul{
  display:inline;
}

＆＃13;

<nav>
  <ul class=bar>
    <li>
      <input type=checkbox id=1><label for=1>about</label>
      <ul>
        <li>us
        <li>you
        <li>cheese
      </ul>
   </ul>
</nav>

＆＃13;

点击＆＃34;关于＆＃34;您可以看到标签成功变为蓝色，但代码中位于其下方的ul并未显示它inline，它显示为无显示在css的第4行，我曾经默认隐藏了标签。

我做错了什么？

Answer 1

试试此代码 - ＆gt; JSfiddle

请注意+仅在ul是您input的第一个兄弟时才有效。在您的情况下，第一个兄弟是label，因此它不适用于ul。要完成这项工作，只需使用以下内容：

input[type=checkbox]:checked + label + ul{
    display:inline;
}

Answer 2

您需要在最后一条css规则中使用~运算符，而不是+;如下所示。有关详细信息，请参阅The CSS Tricks Article。

.bar{
  list-style-type:none;
}
.bar ul{
  display:none;
}
.bar input[type=checkbox]{
  display:none;
}
label:hover{
    cursor:pointer;
}
input[type=checkbox]:checked + label{
  color:blue;
}
input[type=checkbox]:checked ~ ul{
  display:inline;
}

<nav>
  <ul class=bar>
    <li>
      <input type=checkbox id=1><label for=1>about</label>
      <ul>
        <li>us
        <li>you
        <li>cheese
      </ul>
   </ul>
</nav>

希望有所帮助：）

使用选中的输入不确定css的功能

2 个答案: