javascript - 引导模式中的按钮没有响应
问题描述
我正在尝试将模式作为移动视图的导航栏,并且
当我运行下面的代码片段时,在移动视图中,当我单击图标栏/菜单栏时,模式中的按钮都没有响应。我对此没有任何线索。感谢您提前提供任何帮助
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="#myPage">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li ><a href="HowItWorks.html" style="color: white !important">HOME</a></li>
<li><a href="#band" style="color: white !important">BAND</a></li>
<li><a href="#tour" style="color: white !important">TOUR</a></li>
<li><a href="#contact" style="color: white !important">CONTACT</a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="HowItWorks.html">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
解决方案
请检查您的引导版本和相关的 jquery 版本。尝试将cdns添加到
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
当不添加这些链接时,折叠将无法正常工作。
推荐阅读
- javascript - 通过使用字符串变量作为范围名称来引用 $scope,例如 $scope.[stringVar]
- dropzone.js - 成功上传后禁用/销毁 dropzone
- vba - vba find 方法不适用于有参考的单元格
- php - DST 结束时的 Laravel Carbon addHour()
- reactjs - 整合 react 和 react-fontawesome
- java - 我们必须在 WebFlux 中编写响应式代码吗?
- javascript - 使用 React Web / Cordova 的 Google Analytics
- excel - 访问 VBA,获取表数据并将其粘贴/插入到最后的另一个表中
- reactjs - 如何在测试文件中禁用打字稿规则 - React Enzyme
- jhipster - 如何使用 JHipster 在 mapstruct 中映射对象引用?