Question

我正在尝试使用this为我的导航菜单设置切换按钮。这是js加载器

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/cycle2.js"></script>
<script type="text/javascript" src="js/declarativeToggle.js"></script>

这是菜单按钮和导航菜单：

<span data-toggle-target=".site-nav" class="toggle-btn">MENU</span>
<nav class="site-nav">
    <ul class="group">
        <li><a href="#">Home</a></li>
        <li class="hide-small"><a href="#">About us</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact us</a></li>   
    </ul>
</nav>

这是制作节目和隐藏的CSS：

.toggle-btn {display: none;}
.toggle-btn-visible {display: block;}
.toggle-target-hidden {display: none;}
.toggle-target-expanded {display: block;}

@media screen and (max-width: 767px) {
    .toggle-btn-visible {display: block;}
    .toggle-target-hidden {display: none;}
    .toggle-target-expanded {display: block;}
}

问题是，当我加载页面时，MENU按钮没有出现，这是因为.toggle-btn {display: none;}

此外，当我删除它时，它不起作用（隐藏/显示）。

这里有什么问题？

Answer 1

您必须在 @media屏幕和（max-width：767px）

中设置 .toggle-btn {display：block;}

你的CSS必须

.toggle-btn {display: none;}
.toggle-btn-visible {display: block;}
.toggle-target-hidden {display: none;}
.toggle-target-expanded {display: block;}

@media screen and (max-width: 767px) {
.toggle-btn {display: block;}
.toggle-btn-visible {display: block;}
.toggle-target-hidden {display: none;}
.toggle-target-expanded {display: block;}
}

切换按钮未显示

1 个答案: