堆栈内存溢出
  简体   繁体   English

如何在同一个DIV标签中添加2个不同的onclick函数

[英]How to add 2 different onclick functions to the same DIV tag

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

问题描述

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. 我刚刚开始设计一个网站，并添加了一个功能，您可以在其中单击一个选项卡，然后它会向上滑动以使用javascript功能打开菜单。 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 但是我不知道如何在再次单击它时使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> &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 个解决方案

解决方案1
 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>

解决方案2
 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>

解决方案3
 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: 然后在您的CSS中添加： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何选择单个图像<div>标记和添加 onclick 功能到图像 - how to select an individual image in <div> tag and and add onclick function to image 如何添加2个onclick函数 - How to add 2 onclick functions 如何在 div 标签上使用 onclick - How to use onclick on a div tag 将不同的文本onClick替换为相同的div - Replacing different text, onClick, to SAME div 如何在HTML中将相同的div标签用于不同的内容？ - How to use same div tag with different content in HTML? 删除后如何在同一位置添加div标签 - How to add a div tag at the same place after it is removed 如何为不同的jQuery div函数添加通用按钮？ - How to add a common button for different jquery div functions? 如何将相同的jQuery添加到不同的div，但内容不同？ - How to add same jquery to different div's but with different content? 隐藏具有onclick功能的DIV-寻找更干净的方法来获得相同的结果 - Hiding DIV with onclick functions - looking for a cleaner way to achieve the same result 如何在同一个 HTML span 标签上的 onclick 之后添加 ontouch 事件？ - How do I add ontouch event after onclick on same HTML span tag?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM