Question

我正在尝试了解汉堡包菜单的工作原理。它不起作用。我试过添加＆＃39; ready function＆＃39;没有什么变化。我正在用脚本标签在html中编写js代码，我应该单独提一下js代码吗？

＆＃13;

const std::string inputFormat = "%Y/%m/%d %H:%M:%S:%F";

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您应该将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>

汉堡菜单不起作用

1 个答案: