[英]Bootstrap toggle button is not working
The toggle button is not working to reveal the collapsed elements and I do not know why. 切换按钮无法显示折叠的元素,我也不知道为什么。 When the window is resized the toggle button is displayed but upon pressing, nothing happens.
调整窗口大小后,会显示切换按钮,但按下后则什么也没有发生。 This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes.
这是我第一次使用Bootstrap,因此我可能犯了一些非常明显和荒谬的错误。 Any help is appreciated.
任何帮助表示赞赏。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="boostrap-iso"> <div class="page"> <div class="nav navbar-default"> <div class="container"></div> <li> <a class="logo" href="#1"></a> </li> <li> <a class="cart" href="#7"></a> </li> <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul> <li class="products"><a href="#2">Products</a> </li> <li class="store"><a href="#3">Store</a> </li> <li class="about"><a href="#4">About Us</a> </li> <li class="discover"><a href="#5">Discover</a> </li> <li class="support"><a href="#6">Support</a> </li> </ul> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have at least a few problems: See the docs for the Navbar . 您至少有一些问题:请参阅Navbar的文档。
data-toggle="dropdown"
should be data-toggle="collapse"
data-toggle="dropdown"
应为data-toggle="collapse"
data-target="navHeaderCollapse"
should be data-target=".navHeaderCollapse"
data-target="navHeaderCollapse"
应该是data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. 修复这两个问题后,应该可以打开和关闭菜单。 You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the
navbar-header
class as well as the .nav
& .navbar-nav
classes on your menu list items. 您可能希望利用默认结构来避免(或至少意识到)其他问题,这些问题将您的切换按钮同时包含在菜单列表项上的
navbar-header
类以及.nav
和.navbar-nav
类内。 Also your container
isn't doing anything currently, it should surround the navbar-header / list items. 另外,您的
container
当前未执行任何操作,因此应将其围绕在导航栏标题/列表项周围。
Working Example: 工作示例:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="boostrap-iso"> <div class="page"> <div class="nav navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">LOGO</a> <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-shopping-cart"></span></a> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li class="products"><a href="#2">Products</a> </li> <li class="store"><a href="#3">Store</a> </li> <li class="about"><a href="#4">About Us</a> </li> <li class="discover"><a href="#5">Discover</a> </li> <li class="support"><a href="#6">Support</a> </li> </ul> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The reason that your navbar toggle button isn't working is that you've missed 3 things. 导航栏切换按钮不起作用的原因是您错过了三件事。
You need to change data-toggle="dropdown"
to data-toggle="collapse"
. 您需要将
data-toggle="dropdown"
更改为data-toggle="collapse"
。
You need to change data-target="navHeaderCollapse"
to data-target="#navHeaderCollapse"
. 您需要将
data-target="navHeaderCollapse"
更改为data-target="#navHeaderCollapse"
。
You need to add id="navHeaderCollapse"
to the div with the collapse css class. 您需要使用折叠CSS类将
id="navHeaderCollapse"
添加到div中。
Once you have all these elements the toggle will work. 一旦拥有所有这些元素,切换器便会起作用。 There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first
<li>
elements not being within an <ul>
tag. 还缺少其他一些东西,例如navbar-header div,容器在错误的位置关闭以及第一个
<li>
元素不在<ul>
标记内。
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/ 这是一个可与您的代码一起工作的jsfiddle: https ://jsfiddle.net/4syh8nth/9/
Try using the #
symbol in data-target
attribute to refer on an element whose using this ID. 尝试在
data-target
属性中使用#
符号来引用使用此ID的元素。
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse
element 并将ID属性添加到您的
.navbar-collapse
元素
<div id="navHeaderCollapse" class="collapse navbar-collapse">
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
响应式导航栏要求将崩溃插件包含在您的Bootstrap版本中
You may make this as like i did by bootstrap. 您可能像我通过引导程序所做的那样。 some classes in your code i didn't recognize its bootstrap included or not.
您代码中的某些类,我不知道是否包含其引导程序。 thanks
谢谢
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products"><a href="#2">Products</a></li>
<li class="store"><a href="#3">Store</a></li>
<li class="about"><a href="#4">About Us</a></li>
<li class="discover"><a href="#5">Discover</a></li>
<li class="support"><a href="#6">Support</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue. 我曾经遇到过同样的问题。
I used data-toggle cdn in the head section and it worked in my case. 我在开头使用了data-toggle cdn,它在我的情况下有效。 For more info check the link .
有关更多信息,请检查链接 。
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML. 在HTML的顶部使用https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css 。
Check whether you have used all related CDNs. 检查是否使用了所有相关的CDN。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.