javascript - 使用 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

你会想要改变

x.className += "responsive";

到

x.className += " responsive";

此时，您的类变为menubarresponsive 而不是menubar 和responsive。