gpt4 book ai didi

javascript - Onclick 没有被注册,一直告诉我它是未定义的

转载 作者:可可西里 更新时间:2023-11-01 13:29:05 26 4
gpt4 key购买 nike

每当单击“菜单”图标时,我都试图让菜单滑入。现在我看不出哪里错了。我在控制台中收到“菜单未定义”错误。

<!DOCTYPE html>
<html>
<head>
<title>Menu rechts</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section class="web_wrapper">
<header>
<main style="width: 100%;">
<button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
</main>
</header>
</section>
<section class="menu_show">
<nav style="right: -20%;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<nav>
</section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>

使用的javascript

function menu()
{
var menu = document.querySelector("nav");
var main = document.querySelector("main");

if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}

CSS收到评论后,这似乎是一个 css 问题。由于这个原因,我也发布了 CSS。

* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0; }

body {
width: 100%;
color: #212121; }

a {
text-decoration: none; }

li {
list-style-type: none; }

.web_wrapper {
float: left;
width: 100%;
height: auto; }

header {
width: 100%;
height: 100%; }
header main {
height: 75px; }
header main button#menu_toggle.material-icons {
position: relative;
top: 50px;
left: 1000px;
background: transparent;
transition: transform 0.3s, color 0.3s;
font-size: 24pt !important; }
header main button.active {
transform: rotate(90deg);
color: #536DFE; }

.menu_show {
height: 100vh;
float: right;
background: #607D8B; }
.menu_show nav {
width: 20%; }
.menu_show nav ul {
width: 100%; }
.menu_show nav ul li {
width: 100%;
text-align: center; }

最佳答案

试试下面的,

您可以简单地使用 jQuery animate 函数将其归档

阅读此 animate

var click = 0; //keep this flag to identify the click

function menu() {

var menu = $("nav");

$(menu).animate({
width: 'toggle'
},"slow","easeOutElastic");

if (click == 0) {
$(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic");
click = 1;
} else {
$(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic");
click = 0;
}

console.log(click);

}
nav {
color: 'black';
background-color: #ddd;
text-align: justify;
width: 20%;
float: right;
margin-top: -20px;
}
.web_wrapper {
width: 80%;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<section class="web_wrapper">
<header>
<div style="width: 100%;" id="main">
<button class="material-icons" id="menu_toggle" onclick="menu();">menu</button>
</div>
</header>
</section>
<section class="menu_show">
<nav style="right:-20%;" id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>

关于javascript - Onclick 没有被注册,一直告诉我它是未定义的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32933267/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com