Question

我想创建一个带有CSS的HTML5菜单，它可以用于点击而不是悬停。我在网上看到了用JS完成的例子。我想知道如果没有JS可以做到这一点。一种方法可能是添加

 <input type='checkbox' />

在每个父母之前，并根据其是否检查显示子项目你觉得怎么样？

Answer 1

`:checked`

是的，您可以使用复选框来执行此操作，但目前尚未得到很好的支持。它使用下一个同级+和一般同级~选择器以及:checked。

jsFiddle

<强> HTML

<input id="menu-button" type='checkbox' />
<label for="menu-button"></label>
<ul id="menu">
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
</ul>

<强> CSS

/* hide the checkbox */
 #menu-button {
    position:absolute;
    left:-9999px;
    top:-9999px;
}
#menu-button + label:after {
    display:block;
    content:"v";
}
#menu-button:checked + label:after {
    content:"^";
}
#menu {
    display:none;
}
#menu-button:checked ~ #menu {
    display:block;
}

`:target`

另一种方法是使用<a>代码和:target，这也不是很好支持。

jsFiddle

<强> HTML

<a href="#menu">Show menu</a>
<div id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
    </ul>
    <a href="#">Hide menu</a>
</div>

<强> CSS

#menu {
    display:none;
}
#menu:target {
    display:block;
}

没有JS的可点击的css菜单

1 个答案:

`:checked`

`:target`