Javascript 切换按钮不显示

我正在尝试使用为我的导航菜单创建切换按钮。 这是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>

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

此外，当我删除此项时，它不会工作隐藏/显示

这里有什么问题？

您必须设置。在@media screen中切换btn{display:block；}，最大宽度：767px

你的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;}
}

---

您是否确保页面中加载的两个本地js文件正确加载？是的，请尝试使用id而不是class:data toggle target=site nav，没有任何错误，切换按钮在显示器上的显示宽度应小于768px-它应为类toggle-btn-visible。请查看教程。您可以从控制台进行检查。javascript是否将toggle btn visible类添加到toogle btn？

.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;}
}