个人中心
gpt4 book ai didi

javascript - 汉堡菜单不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 02:56:32 24 4
gpt4 key购买 nike

我正在尝试了解汉堡菜单的工作原理。它不工作。我试过添加“就绪功能”，也没有任何改变。我正在用脚本标签在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">&#9776;</button>
  <button class="cross">&#735;</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 导入您的 header 。

<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>

关于javascript - 汉堡菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32059947/

24 4 0
文章推荐： javascript - 从 javascript 打印
文章推荐： javascript - 从 ES6 javascript 中的字符串动态创建方法(非浏览器)
文章推荐： javascript - 开 Jest : resolves return undefined from Promise
文章推荐： javascript - JQuery 切换和删除 css 类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com