我刚开始设计一个网站，我添加了一个功能，您可以在其中单击一个选项卡，它会向上滑动以使用 javascript 函数打开菜单。但是我不知道如何让 div 在您第二次单击时返回，这是代码
function myFunction() {
document.getElementById("toppart1").style.top="-15%";
document.getElementById("centerbox").style.top="30%";
}
function backUp() {
document.getElementById("toppart2").style.top="0px";
document.getElementById("centerbox").style.top="23%";
}body{
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#frontpage{
background-color:navy;
width:100%;
height:100%;
top:25%;
left:0px;
position:absolute;
z-index:2;
}
#toppart1{
background-color:navy;
width:100%;
height:25%;
top:0px;
left:0px;
position:absolute;
transition:top .5s;
font-size:small;
font-weight:bold;
z-index:1;
}
#toppart1:hover{
top:-5px;
}
#centerbox{
background-color:white;
border:thick black solid;
opacity: .6;
width:70%;
left:15%;
height:40%;
top:23%;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
position:absolute;
transition:top .5s;
}
#menubuttons{
background-color:white;
width:auto;
height:15%;
top:15%;
float:left;
font-weight:bold;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
z-index:-1;
position:absolute;
top:10%;
transition:background-color 1s;
}
#menubuttons:hover{
background-color:transparent;
color:navy;
}
#img-arrow{
background-color:transparent;
transition:opacity .5s
}
#img-arrow:hover{
opacity: .5;
}<!DOCTYPE html>
<html>
<head>
<script src="DBWEBSjAVA.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="Website.css" type="text/css" rel="stylesheet">
<title>Untitled 1</title>
</head>
<body style="background-color:black;">
<div id="menubuttons">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:15%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:29%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:43%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:57%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:71%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:84%;">
<h1 align="center">HOME</h1>
</div>
<div id="frontpage">
<div id="centerbox" style="left: 15%; top: 14%; height: 64%" onclick="prettyColors()">
</div>
</div>
<div id="toppart1" onclick="myFunction()" onrelease="backUp()" style="left: 0px; top: 0px;">
<h1 align="center">DB WEBS</h1>
<img id="img-arrow" src="Untitled.png" style="left:47%; top:67%; position:absolute;" draggable="false" height="36" width="38"/>
</div>
</body>
</html>看看它是如何上升的？当你第二次点击它时，我不知道如何让它恢复原状。请帮忙。
最佳答案
试试这个:
function showOrHide() {
if (document.getElementById("centerbox").style.top == "30%") {
backUp();
} else {
myFunction();
}
}
function myFunction() {
document.getElementById("toppart1").style.top="-15%";
document.getElementById("centerbox").style.top="30%";
document.getElementById("toppart1").style.transform="rotate(180deg)";
}
function backUp() {
document.getElementById("toppart1").style.top="0px";
document.getElementById("centerbox").style.top="23%";
document.getElementById("toppart1").style.transform="rotate(0deg)";
}body{
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#frontpage{
background-color:navy;
width:100%;
height:100%;
top:25%;
left:0px;
position:absolute;
z-index:2;
}
#toppart1{
background-color:navy;
width:100%;
height:25%;
top:0px;
left:0px;
position:absolute;
transition:top .5s;
font-size:small;
font-weight:bold;
z-index:1;
}
#toppart1:hover{
top:-5px;
}
#centerbox{
background-color:white;
border:thick black solid;
opacity: .6;
width:70%;
left:15%;
height:40%;
top:23%;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
position:absolute;
transition:top .5s;
}
#menubuttons{
background-color:white;
width:auto;
height:15%;
top:15%;
float:left;
font-weight:bold;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
z-index:-1;
position:absolute;
top:10%;
transition:background-color 1s;
}
#menubuttons:hover{
background-color:transparent;
color:navy;
}
#img-arrow{
background-color:transparent;
transition:opacity .5s
}
#img-arrow:hover{
opacity: .5;
}<!DOCTYPE html>
<html>
<head>
<script src="DBWEBSjAVA.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="Website.css" type="text/css" rel="stylesheet">
<title>Untitled 1</title>
</head>
<body style="background-color:black;">
<div id="menubuttons">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:15%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:29%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:43%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:57%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:71%;">
<h1 align="center">HOME</h1>
</div>
<div id="menubuttons" style="left:84%;">
<h1 align="center">HOME</h1>
</div>
<div id="frontpage">
<div id="centerbox" style="left: 15%; top: 14%; height: 64%" onclick="prettyColors()">
</div>
</div>
<div id="toppart1" onclick="showOrHide()" style="left: 0px; top: 0px;">
<h1 align="center">DB WEBS</h1>
<img id="img-arrow" src="Untitled.png" style="left:47%; top:67%; position:absolute;" draggable="false" height="36" width="38"/>
</div>
</body>
</html>关于javascript - 如何向同一个 DIV 标签添加 2 个不同的 onclick 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40028879/