Question

我不明白为什么当我点击复选框时，屏幕上只显示带有id = menu而不是id = social的ul标签。我需要在每个ul标签中设置display：block。

＆＃13;

.show-menu {
    display:block;
}
#menu{
  float:left;
}
#social{
    float:right;
}
ul {
    display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
input[type=checkbox]:checked #social{
    display: block;
}

＆＃13;

<label for="show-menu" class="show-menu">&#9776;</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
    <li><a href="home.php">Home</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="about.php">About</a></li>
</ul>
<div> 
	<ul id="social">
		<li><a href="login.php">Login</a></li>
		<li><a href="register.php">Register</a></li>
    </ul>
</div>

＆＃13;

Answer 1

因为#social附近的div。 ~是兄弟选择器。如果您需要div，可以尝试input[type=checkbox]:checked ~ div #social作为CSS选择器。

.show-menu {
    display:block;
}
#menu{
  float:left;
}
#social{
    float:right;
}
ul {
    display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
input[type=checkbox]:checked ~ #social{
    display: block;
}

<label for="show-menu" class="show-menu">&#9776;</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
    <li><a href="home.php">Home</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="about.php">About</a></li>
</ul>
<ul id="social">
	<li><a href="login.php">Login</a></li>
	<li><a href="register.php">Register</a></li>
</ul>

当我单击该复选框时，屏幕上只显示ul标签

1 个答案: