Question

我正在将我的网站转换为concrete5。该网站应该是响应式的。因此，我正在尝试为较小的屏幕制作响应式菜单。

然而，当我点击我的菜单按钮时，菜单没有显示（它不会切换到显示：阻止）。

代码：

CSS：

 /*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul.nav {
    display: block;
}

HTML（从concrete5中提取）：

 <div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div id="menu">
    <div id="test" class=" ccm-block-styles">
      <ul class="nav">
        <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a></li>
        <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a></li>
        <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a></li>
        <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a></li>
        <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a></li>
        <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a></li>
        <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a></li>
        <li class=""><a href="/index.php/info/" target="_self" class="">info</a></li>
        <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a></li>
      </ul>
    </div>
    <div id="links" class=" ccm-block-styles">
      <p><a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank"><img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20"></a>&nbsp;&nbsp;<img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp;<a href="mailto:erlend.van.landegem@telenet.be"><img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20"></a></p>
    </div>

Answer 1

检查general sibling selector的工作方式。如果您使用Adjacent兄弟选择器（+）：

，这将有效

＆＃13;

 /*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ #menu{ display: none; }

＆＃13;

<div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div id="menu">
    <div id="test" class=" ccm-block-styles">
      <ul class="nav">
        <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a>
        </li>
        <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a>
        </li>
        <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a>
        </li>
        <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a>
        </li>
        <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a>
        </li>
        <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a>
        </li>
        <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a>
        </li>
        <li class=""><a href="/index.php/info/" target="_self" class="">info</a>
        </li>
        <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a>
        </li>
      </ul>
    </div>
    <div id="links" class=" ccm-block-styles">
      <p>
        <a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank">
          <img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20">
        </a>&nbsp;&nbsp;
        <img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp;
        <a href="mailto:erlend.van.landegem@telenet.be">
          <img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20">
        </a>
      </p>
    </div>

＆＃13;

菜单未显示（css复选框）

1 个答案: