javascript - 切换后引导汉堡不显示列表元素
问题描述
我正在尝试在页面上合并 Bootstrap 的汉堡菜单,但似乎无法在切换后显示列表元素。
菜单在桌面上加载良好,并隐藏链接,显示汉堡包。但是,点击汉堡图标,什么都没有发生?
样品:
ul {
list-style-type: none;
}
li {
padding: 0px 30px;
}
<!-- BOOTSTRAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar navbar_container">
<div class="navbar_container-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar_wrapper-list container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar_wrapper-ul navbar-nav mr-auto">
<li id="list-item-1" class="navbar_wrapper-li active nav-item"><a class="active" href="#">Home</a></li>
<li id="list-item-2" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Blog</a></li>
<li id="list-item-3" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li id="list-item-4" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- .navbar_wrapper-list end -->
</nav>
</div>
<!-- .navbar_container-wrapper end -->
</div>
<!-- .navbar-container end-->
这个CodePen采用了我的方法。
解决方案
实际上,您需要在“bootstrap.min.js”之前添加“jquery.min.js”。因为“bootstrap.min.js”依赖于“jquery.min.js”
ul {
list-style-type: none;
}
li {
padding: 0px 30px;
}
<!-- BOOTSTRAP -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar_container">
<div class="navbar_container-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar_wrapper-list container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar_wrapper-ul navbar-nav mr-auto">
<li id="list-item-1" class="navbar_wrapper-li active nav-item"><a class="active" href="#">Home</a></li>
<li id="list-item-2" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Blog</a></li>
<li id="list-item-3" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li id="list-item-4" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- .navbar_wrapper-list end -->
</nav>
</div>
<!-- .navbar_container-wrapper end -->
</div>
<!-- .navbar-container end-->
推荐阅读
- sql - :r 命令可以正常工作,直到我将其移入 IF 或 BEGIN TRY/END TRY 语句
- django - Django 查询集过滤具有相同多对多字段的对象
- haskell - 列表理解Haskell中的算术序列问题
- javascript - Sweet alert JS 无法获取输入变量
- kotlin - Kotlin 暴露的 ORM - id 不在记录集中
- docker - Docker 和网络钩子?
- perl - 从派生类对象返回基类对象
- com - MIDL 帮助字符串属性的最大长度是多少?
- php - stmt 查询工作正常,但简单查询会出现致命错误:未捕获的错误
- python - Neo4j 如何在 python 中访问节点的属性