如何添加2个不同的onclick功能到同一个DIV标签
How to add 2 different onclick functions to the same DIV tag
我刚刚开始设计一个网站，我添加了一个功能，你点击一个标签，它滑动打开一个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>最明显的解决方案是使用两个类。然后，您只需要一个函数来在两者之间切换:
function toggle() {
var topPart = document.getElementById("toppart1");
var centerbox = document.getElementById("centerbox");
if (!topPart.classList.contains("open")) {
topPart.classList.add("open");
centerbox.classList.add("open");
}
else {
topPart.classList.remove("open");
centerbox.classList.remove("open");
}
}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.open {
top:30%;
}
#toppart1.open {
top:-15%;
}
#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="toggle()" 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>你应该给元素一个类来指定它是否被向下滑动，然后在点击时切换这个类。
var el = document.getElementById('toppart1');
if(el.classList.contains("down")){
el.classList.remove("down");
document.getElementById('centerbox').classList.remove("down");
}
else {
el.classList.add("down");
document.getElementById('centerbox').classList.add("down");
}
然后在CSS中添加:
#toppart1.down {
top: -15%;
}
#centerbox.down {
top: 30%;
}
相关文章：
- 提供“;onClick"适用于iPad(触摸屏）和桌面用户的默认功能
- 当我按下回车键时，如何触发onclick功能
- 打开网页并自动调用OnClick功能
- 具有多个功能的Onclick属性
- 具有onclick功能的自定义复选框在实际切换复选框之前执行功能
- 一个按钮中的两个onClick功能，并希望一个接一个地发生一个单击功能
- bootstrap超级菜单，如何更改为onclick功能和手机下拉项
- 对触发其onclick功能的按钮进行键绑定
- 如何在链接上附加onclick事件以使用javascript功能
- 为什么onClick功能不是'未识别
- 更改选择选项下拉列表与onclick功能按钮
- 如何使用onclick功能在同一页面上更改流URL和，图像URL和广播名称
- 引导 - 工具提示中带有 OnClick 功能的按钮
- (飞镖）我希望触发两个不同的onclick功能，具体取决于单击时是否选中了单选按钮.我该怎么做
- 使用单选按钮OnClick和JavaScript功能动态填充数字字段
- Onclick更改按钮的名称和功能
- 如何使用ajax获得onClick和onOpstate的相同功能
- 应用样式“;游标:指针”;所有具有onClick功能的React组件
- 为什么浏览器会触发我的onclick功能
- 锚链接功能-onclick和href
