stackoom
  简体   繁体   中英

How to add 2 different onclick functions to the same DIV tag

 原文  2016-10-13 18:57:50  7   3    javascript/ html/ css

Question

I've just started designing a website and I added a feature where you click a tab and it slides up to open the menu with a javascript function. But i don't know how to get the div to come back down when you click it a second time, Here's the code 

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

See how it goes up? I don't know how to make it go back down when you click it a second time. Please help.

3 answers

solution1
 1  2016-10-13 19:02:47

Try this: 

 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>

solution2
 0  2016-10-13 19:12:39

The most obvious solution is to use two classes. Then you'll need only one function to toggle between two: 

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

solution3
 0  2016-10-13 19:14:06

You should give the element a class to specify whether it has been slid down or not and then toggle that class on click. 

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

then in your css add: 

#toppart1.down {
    top: -15%;
}
#centerbox.down {
    top: 30%;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to select an individual image in <div> tag and and add onclick function to image How to add 2 onclick functions How to use onclick on a div tag Replacing different text, onClick, to SAME div How to use same div tag with different content in HTML? How to add a div tag at the same place after it is removed How to add a common button for different jquery div functions? How to add same jquery to different div's but with different content? Hiding DIV with onclick functions - looking for a cleaner way to achieve the same result How do I add ontouch event after onclick on same HTML span tag?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM