如何将2个不同的onclick函数添加到同一个DIV标记中

时间：2016-10-13 18:57:50

标签： javascript html css

我刚刚开始设计一个网站，我添加了一个功能，您点击一个标签，它会向上滑动以打开带有javascript功能的菜单。但是当我再次点击它时，我不知道怎么让div回来，这是代码

＆＃13;
＆＃13; 
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%";
	}
＆＃13; 
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;
	}
＆＃13; 
<!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>
		&nbsp;<img id="img-arrow" src="Untitled.png" style="left:47%; top:67%; position:absolute;" draggable="false" height="36" width="38"/>
		</div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

看看它是怎么回事？当你再次点击它时，我不知道怎么让它再次失效。请帮忙。

3 个答案:

答案 0 :(得分：1)

试试这个：

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>
		&nbsp;<img id="img-arrow" src="Untitled.png" style="left:47%; top:67%; position:absolute;" draggable="false" height="36" width="38"/>
		</div>
</body>

</html>

答案 1 :(得分：0)

最明显的解决方案是使用两个类。那么你只需要一个功能就可以在两个之间切换：

＆＃13;
＆＃13; 
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");
  }
}
＆＃13; 
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;
	}
＆＃13; 
<!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>
		&nbsp;<img id="img-arrow" src="Untitled.png" style="left:47%; top:67%; position:absolute;" draggable="false" height="36" width="38"/>
		</div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你应该给元素一个类来指定它是否已经滑落，然后在点击时切换该类。

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%;
}
相关问题
最新问题