Question

嘿，我在菜单中创建了这个复选框：

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

        <ul class="sub-nav">
                <li>Johnny</li>
                <li>Julie</li>
                <li>Jamie</li>
        </ul>

风格：

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.sub-nav {
    display: none;
}
input[type=checkbox]:checked > .sub-nav {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: red;
}

演示：http://jsfiddle.net/4huzr/71/

我希望当您单击灰色复选框时打开子菜单（当您再次单击它应该隐藏时），但此示例无效，任何人都可以提供帮助？

Answer 1

子菜单不是输入的子项，因此>将无效。

JSFiddle Demo

CSS应该阅读

input[type=checkbox]:checked ~ .sub-nav {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: red;
}

Answer 2

变化：

input[type=checkbox]:checked > .sub-nav {

为：

input[type=checkbox]:checked ~ .sub-nav {

<强> jsFiddle example

>选择孩子（不使用子导航），其中~是一般的兄弟选择器。

Answer 3

对于任何人来说，这应该是一个很好的即插即用组件。您始终可以为需要的其他内容编辑一些CSS。

.menu {
  width: 100%;
}

.menu-checkbox {
  display: none;
}

.menu-label {
  display: block;
  position: relative;
  background: black;
  color: white;
  font-weight: bold;
  height: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}


/*menu-label and menu-text have same padding*/

.menu-label {
  padding: 0 .5rem;
}

.menu-content {
  overflow: hidden;
  word-break: break-all;
  background: black;
  color: white;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  max-height: 0;
}

.menu-text {
  padding: 0 .5rem;
}

.menu-checkbox:checked~.menu-content {
  max-height: 100vh;
}

.menu-label::after {
  position: absolute;
  right: 1rem;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}


/*codes from utf-8 dingbats*/

.menu-checkbox[type=checkbox]+.menu-label::after {
  content: "\2795";
}

.menu-checkbox[type=checkbox]:checked+.menu-label::after {
  content: "\2796";
}

<div class="menu">
  <input class="menu-checkbox" id="menu-toggle" type="checkbox" name="tabs">
  <label class="menu-label" for="menu-toggle">LABEL NAME</label>
  <div class="menu-content">
    <p class="menu-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It itaque.sdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdsdddddddddddddddddddddddddddddddddddddddddd</p>
  </div>
</div>

点击复选框打开菜单

3 个答案: