我一直试图让这个汉堡包菜单工作时间最长,而且我已经尝试了很多,但我只是因为某种原因而继续在圈子里打开(菜单不会打开)菜单未打开是问题:(),
我从学习如何从本教程创建菜单中获得了菜单 - > Youtube Link
请告诉我如何解决这个问题或者转介给我类似的帖子,谢谢!
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
});
});

header nav ul {
height: 0;
overflow: hidden;
background: #6134A3;
}
header nav ul.open {
height: auto;
}
.burger-nav {
padding: 0px;
margin: 0px;
display: block;
height: 40px;
width: 100%;
cursor: pointer;
background-image: url(images/nav.png);
background-repeat: no-repeat;
background-size: 10%;
background-position: 97%;
background-color: #502196;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>MENU</title>
<link rel="stylesheet" href="slicknav.css" />
<script language="JavaScript" type="text/javascript" scr="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<style>
</style>
<body>
<header>
<div class="wrapper">
<nav>
<a class="burger-nav"></a>
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</nav>
</div>
</header>
<!--watch this video to finish drop down https://www.youtube.com/watch?v=FDh7Mdl2oww -->
<script language="JavaScript" type="text/javascript" scr="menu.js"></script>
</body>
&#13;
答案 0 :(得分:1)
因为身高:自动财产。你应该设定一定的价值。像400px,或100vh。或者您可以尝试这样的事情:
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").slideToggle(400);
});
});
header nav ul {
height: auto;
overflow: hidden;
display: none;
background: #6134A3;
}
答案 1 :(得分:1)
使用最新版本的jquery ....
<head>
<title>MENU</title>
<link rel="stylesheet" href="slicknav.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>