我正在尝试学习汉堡菜单的工作方式。它不起作用。我尝试添加“就绪功能”以及没有任何更改。我正在用脚本标签在html中编写js代码，我是否应该单独提及js代码？
<script>
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
</script>body{
font-family: 'Noto Sans', sans-serif;
margin:0;
background-image: url('https://unsplash.imgix.net/41/yEWFnFQRqfmY9l9efJ6g_Snap01-web.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=7580de2dc3b3821f0dc1c97f2d60fe7c');
}
header{
width:100%;
background:#1d1f20;
height:50px;
line-height:50px;
}
.hamburger{
background:none;
position:absolute;
top:0;
right:0;
line-height:45px;
padding:0px 15px 0px 15px;
color:#fff;
border:0;
font-size:1.4em;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.cross{
background:none;
position:absolute;
top:0px;
right:0;
padding:0px 15px 0px 15px;
color:#fff;
border:0;
font-size:3em;
line-height:65px;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313; position:absolute; text-align:center;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu ul li a { text-decoration:none; margin: 0px; color:#fff;}
.menu ul li a:hover { color: #fff; text-decoration:none;}
.menu a{text-decoration:none; color:white;}
.menu a:hover{text-decoration:none; color:white;}
.glyphicon-home{
color:white;
font-size:1.5em;
margin-top:5px;
margin:0 auto;
}<html>
<head>
<title>Hello</title>
<link type="text/css" rel="stylesheet" href="new9.css"/>
</head>
<header>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="#"><li>LINK ONE</li></a>
<a href="#"><li>LINK TWO</li></a>
<a href="#"><li>LINK THREE</li></a>
<a href="#"><li>LINK FOUR</li></a>
<a href="#"><li>LINK FIVE</li></a>
</ul>
</div>
</html>最佳答案
您应该将jQuery导入标头。
<head>
<title>Hello</title>
<link type="text/css" rel="stylesheet" href="new9.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>