为什么那个汉堡菜单不起作用？答案

【问题标题】：Why does that hamburger menu not work?为什么那个汉堡菜单不起作用？
【发布时间】：2016-10-07 08:15:49
【问题描述】：

你能告诉我为什么那个汉堡菜单不起作用吗？我真的没有找到答案；（连接HTML / Javascript是可以的。我必须说我不懂Javascript，我只是从网上复制代码，也许是JavaScript文件有问题？我的所有文件在一个文件夹中，没有子文件夹：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="nav.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：

$('.hamburger').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-down');
});

【问题讨论】：

你添加jQuery了吗？我没看到。在任何其他脚本之前添加它，它应该可以工作。
我已经添加了，但是还是不行
jsfiddle.net/xg3s83yo 它的工作。在小屏幕上查看
所以问题在于 JS 和 HTML 的连接，对我来说，在所有其他脚本之前放置
能否请您为您的代码制作一个小提琴并给我链接？

标签： html css

【解决方案1】：

我刚刚将您的代码复制到JSFiddle，它非常有效。你要么：

忘记包含jQuery
忘记包含Bootstrap
您使用的是 IE

顺便说一下，汉堡图标不会显示，除非您将窗口大小调整为更小的宽度。

尝试添加到您的<head>：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

【讨论】：

嗨。我已经添加了 jQuery，我使用的是 Chrome 最新版本，但我不知道你说的包含引导程序是什么意思？我用你的代码试过了，但它也不起作用;(
编辑：很有趣，我尝试了一个完全不同的导航代码，它似乎也与javascript的滑动功能有问题？？

【解决方案2】：

这是您的代码的DEMO。尝试在<head>下添加jQuery文件

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="reset.css">
     <link rel="stylesheet" type="text/css" href="style.css">
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     <script type="text/javascript" src="nav.js"></script>

</head>

【讨论】：

刚刚编辑了帖子仔细看我先改变了加载顺序'jQuery'然后'custom-js'
当你测试它时，它对你有用吗？我试过了，但它仍然没有打开那个菜单幻灯片；（
因为我没有nav.js，所以我在JS Fiddle 上进行了测试，它工作正常。缩小输出窗口并检查它。