使用CSS和Javascript的响应式菜单栏

Question

我已经创建了一个响应式菜单栏，遇到一个问题，当我单击下拉按钮时，根本没有样式。

 function myFunction(){ var x = document.getElementById("myMenubar"); if (x.className === "menubar"){ x.className += "responsive"; }else{ x.className = "menubar"; } }

 .menubar{ position:absolute; width:600px; margin-left:35%; margin-top:4.5%; } .menubar ul{ overflow:hidden; } .menubar ul li{ display:inline-block; margin-right:15%; list-style-type:none; } .menubar ul li a{ text-decoration:none; color:white; } .menubar ul li.icon{display:none;} .menubar ul li a:hover{color:red;text-decoration:none;} .menubar ul li a.current{color:red;text-decoration:none;} @media screen and (max-width:765px){ .menubar{ width:130px; margin-left:57%; } .menubar ul li:not(:first-child) {display:none;} .menubar ul li.icon{ float:right; display:inline-block; } } @media screen and (max-width:765px){ .menubar.responsive ul{position:relative;} .menubar.responsive ul li.icon{ position:absolute; right:0; top:0; } .menubar.responsive ul li{ float: none; display: inline; } .menubar.responsive ul li a{ text-decoration:none; color:white; text-align:center; } }

 <div class="menubar" id="myMenubar"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> </ul> </div>

我做错了什么？ 我正在使用http://www.w3schools.com/howto/howto_js_topnav.asp教程，并且更改了一些代码以适合我的设计。 我觉得基础都一样

Answer 1

用它！！！

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="menu" class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></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"> <li class="active"><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a> </li> <li><a href="#">Page 1-2</a> </li> <li><a href="#">Page 1-3</a> </li> </ul> </li> <li><a href="#">Page 2</a> </li> <li><a href="#">Page 3</a> </li> </ul> </div> </div> </nav> </body> </html>

Answer 2

你想改变

x.className += "responsive";

至

x.className += " responsive";

此刻，你的类成为menubarresponsive代替menubar和responsive 。

Answer 3

好...所以我将首先指出错误：

您的CSS发生错误。 .menubar.responsive选择同时与类名的所有元素菜单栏和响应。
您的javascript中也有错误。 classname属性是一个字符串。 因此x.classname += responsive不会将响应添加为另一个类，而是将当前类名与responsive连接起来，因此结果将是menubarresponsive 。
您没有将myFunction()分配给任何对象。

解

您可以更改css（我不建议您这样做，因为这是一个漫长的过程），也可以更改您的JavaScript代码。 在这里，我将您的逻辑if语句更改为可切换responsive类的简单语句。

 function myFunction() { document.getElementById('myMenubar').classList.toggle('responsive'); }

 .menubar{ position:absolute; width:600px; margin-left:35%; margin-top:4.5%; } .menubar ul{ overflow:hidden; } .menubar ul li{ display:inline-block; margin-right:15%; list-style-type:none; } .menubar ul li a{ text-decoration:none; color:white; } .menubar ul li.icon{display:none;} .menubar ul li a:hover{color:red;text-decoration:none;} .menubar ul li a.current{color:red;text-decoration:none;} @media screen and (max-width:765px){ .menubar{ width:130px; margin-left:57%; } .menubar ul li:not(:first-child) {display:none;} .menubar ul li.icon{ float:right; display:inline-block; } } @media screen and (max-width:765px){ .menubar.responsive ul{position:relative;} .menubar.responsive ul li.icon{ position:absolute; right:0; top:0; } .menubar.responsive ul li{ float: none; display: inline; } .menubar.responsive ul li a{ text-decoration:none; color:white; text-align:center; } }

 <div class="menubar" id="myMenubar"> <ul> <li><a href="#" class="current" onclick="myFunction()">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> </ul> </div>

使用CSS和Javascript的响应式菜单栏

问题描述

3 个解决方案

解决方案1
2 2017-01-13 07:47:57

解决方案2
2 已采纳 2017-01-13 07:58:35

解决方案3
0 2017-01-13 08:01:32

使用CSS和Javascript的响应式菜单栏

问题描述

3 个解决方案

解决方案1 2 2017-01-13 07:47:57

解决方案2 2 已采纳 2017-01-13 07:58:35

解决方案3 0 2017-01-13 08:01:32

解决方案1
2 2017-01-13 07:47:57

解决方案2
2 已采纳 2017-01-13 07:58:35

解决方案3
0 2017-01-13 08:01:32