Question

我正在尝试创建响应式导航栏，因此当您点击隐藏的复选框时，内容会取消隐藏。

问题是，我无法检查＆＃34;＆＃34;＆＃34;＆＃34; css实际上接受并做任何事情。

在此处运行的示例：http://codepen.io/anon/pen/KNvvZy

CSS：

#nav-hidden{background: red; display: none;}
#navigation-mobile{display:none;}

/* DESKTOP */
@media only screen and (max-width: 1200px) {
        #navigation-mobile {display: block;}
        #menu-toggle:checked ~ #nav-hidden {
            opacity: 1;
            height: 100vh;
            visibility: visible;
        }

        .label-toggle {
            cursor: pointer;
            display: block;
            float: right;
        }
}

HTML：

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="label-toggle"></label>
    </input>
    <div id="nav-hidden">
        <ul>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

Answer 1

在您的示例中，您拥有原始状态：

#nav-hidden{display:none;}

因此，您需要在:checked州：

重置它

#menu-toggle:checked ~ #nav-hidden {display:block;}

另外要指出的是，您可以为height，opacity，visibility等设置动画，但不能为display属性设置动画。

<input>元素是一个自动结束标记，您可以<input>或<input />，但不能<input></input>。

#nav-hidden {
  display: none;
}
#menu-toggle:checked ~ #nav-hidden {
  display: block;
}

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="label-toggle"></label>
  <div id="nav-hidden">
    <ul>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>

选中复选框后取消隐藏div

1 个答案: