如何让这个响应式汉堡包菜单工作？它只是不 [英] How to make that responsive hamburger menu work? It just doesnt
本文介绍了如何让这个响应式汉堡包菜单工作？它只是不的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你能告诉我为什么汉堡菜单不打开？
Can you tell me why that hamburger menu doesn't open?
但是它仍然不工作（如果我复制的代码在jsfiddle一切正常，所以我认为有一个问题的连接HTML / JS？还有趣的是，如果我尝试一些
But still it doesn't work ;( If I copy the code on jsfiddle everything works, so I think there is a problem the the connection HTML/JS? Also the funny thing is that if I try out some other different navigation from codepen, it also doesnt open.
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Menu</h1>
<nav>
<a href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</a>
<ul class="clearfix menu">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
CSS：
@import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
html, body {
height: 100%;
}
body {
font: 1em 'Roboto', sans-serif;
color: #555;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul {
list-style: none;
max-width: 800px;
margin: 0 auto;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
h1 {
padding: 30px 0;
font: 1.5em 'Open Sans', sans-serif;
text-align: center;
}
nav {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f5f5;
}
ul a {
display: block;
padding: 20px;
padding-right: 0 !important; /* important overrides media queries */
font-size: 13px;
font-weight: bold;
text-align: center;
color: #aaa;
cursor: pointer;
text-decoration: none;
}
ul a:hover {
background: #eee;
}
nav li {
float: left;
width: 20%;
border-right: 1px solid #ddd;
}
nav li:last-child {
border-right: none;
}
@media only screen and (max-width: 480px) {
.hamburger {
padding: 15px;
display: block;
}
.line {
border-bottom: 4px solid #bbb;
width: 35px;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
nav li {
width: 100%;
}
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s linear;
}
.slide-down {
height: 262px;
}
}
Javascript：
Javascript:
$('.hamburger').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-down');
});
推荐答案
准备好了 -
$( document ).ready(function() {
$('.hamburger').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-down');
});
});
这篇关于如何让这个响应式汉堡包菜单工作？它只是不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
