Question

如果你看这里...... http://matiny.tk/Mixed%20Swim/Mixed.html 这是一个我正在制作的简单网站。当屏幕缩小时，它使用Bootstrap切换菜单。很好，菜单标签/复选框组合不起作用，虽然它已经在我的另一个网站上工作。这是相关的代码......

<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"></label>
  <input type="checkbox" id="menulogo">
</nav>

<nav id="menu">
    <a href="" id="one" class="col-sm-12 col-xs-12">SHOP</a>
    <a href="" id="two" class="col-sm-12 col-xs-12">ABOUT</a>
    <a href="" id="three" class="col-sm-12 col-xs-12">BLOG</a>
    <a href="" id="four" class="col-sm-12 col-xs-12">GALLERY</a>
    <a href="" id="five" class="col-sm-12 col-xs-12">CONTACT</a>
</nav>

label {
    font-size: 40px;
    width: 100%;
    color: white;
    z-index: 2;
}

#menulogo {
    opacity: 0;

}


#menu a {
    background: rgba(0,0,0,.35);
    font-size: 50px;
    color: white;
    height: 75px;

}

#menu {
    margin-top: 100px;
    text-align:center;
    z-index: 3;
    display: none;
    position: fixed;

}

#menulogo:checked + #menu {
    display: block;
}

Answer 1

事实证明，我的元素顺序不正确。如果要使用类似......＃menulogo：checked + #menu，那么+或〜选择器意味着#menu导航必须在复选框输入后立即进行，如此...

  <label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png">   MENU</label>
  <input type="checkbox" id="menulogo">
<!--These must be in sequence-->
  <nav id="menu">
    <a href="" id="one" class="col-sm-12 col-xs-12">SHOP</a>
    <a href="" id="two" class="col-sm-12 col-xs-12">ABOUT</a>
    <a href="" id="three" class="col-sm-12 col-xs-12">BLOG</a>
    <a href="" id="four" class="col-sm-12 col-xs-12">GALLERY</a>
    <a href="" id="five" class="col-sm-12 col-xs-12">CONTACT</a>
</nav>

为什么我网站上的按钮不起作用？

1 个答案: