Javascript 使信息框飞出并展开
我试图做一个圆圈，当点击时，会导致一个文本框飞出并展开。然后，当再次单击时，我希望长方体折叠并再次变为不可见。我已经包括了我的代码。我让盒子飞出来，但我似乎无法让它倒塌。请帮忙 HTML/JavascriptJavascript 使信息框飞出并展开,javascript,html,css,onclick,Javascript,Html,Css,Onclick,我试图做一个圆圈，当点击时，会导致一个文本框飞出并展开。然后，当再次单击时，我希望长方体折叠并再次变为不可见。我已经包括了我的代码。我让盒子飞出来，但我似乎无法让它倒塌。请帮忙 HTML/Javascript <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="indexstyle.css"> <title> </title>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexstyle.css">
<title>
</title>
</head>
<body>
<div id ="container">
<div id ="circle" onclick = "expand();">
<div id ="info">
Information will go here
</div>
</div>
</div>
<script>
var expanded = 0;
function expand(){
if (expanded == 0){
var info = document.getElementById("info");
var circle = document.getElementById("circle");
info.style.zIndex = 1;
info.style.margin = "300px";
info.style.width = "500px";
info.style.padding = "50px";
info.style.visibility = "visible";
info.style.height = auto;
info.style.zIndex = "-1";
expanded = 1;
return expanded;
}
else {
info.style.margin = "0";
}
}
</script>
</body>
</html>
也许这就是你要找的。我已经用jQuery设置好了 其背后的逻辑是默认情况下隐藏此“弹出按钮”，然后利用jQuery单击事件切换将显示所述弹出按钮的类 您可以查看此，以便更好地理解 这是我用来控制弹出按钮的jQuery
$("#circle").click(function(){
$("#info").toggleClass("active");
});
我希望这就是你要找的东西。这是小提琴。我从JavaScript中删除了CSS，只是在DOM对象上交换了类名。那样读起来容易多了 另外，我在本例中没有使用jQuery HTML:
非常感谢你！这是一个如此简单的解决方案，我简直不敢相信我没有想到使用jQuery！谢谢，这正是我想要做的。我真的很感谢你的帮助，没问题。请注意，您不需要使用document.getElementById（）。任何带有id标记的DOM元素都将作为全局作用域onload的变量加载。重要的是确保在文档末尾添加脚本。如果您对答案感到满意，请选择它作为正确答案：）
$("#circle").click(function(){
$("#info").toggleClass("active");
});
<title>
</title>
</head>
<body>
<div id ="container">
<div id ="circle">
<div id ="info">
Information will go here
</div>
</div>
</div>
<script>
circle.addEventListener('click',expand);
function collapse(e){
info.className='';
e.target.removeEventListener('click',collapse);
e.target.addEventListener('click',expand);
}
function expand(e){
info.className='expanded';
e.target.removeEventListener('click',expand);
e.target.addEventListener('click',collapse);
}
</script>
</body>
</html>
#container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#circle {
position: absolute;
width: 10%;
height: 10%;
background-color: blue;
border-radius: 50%;
}
#info{
word-wrap: break-word;
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 15%;
height: 15%;
background-color: #e5e5e5;
border-radius: 25px;
transition: 0.5s;
z-index: -1;
visibility: hidden;
overflow: hidden;
border: solid black 1px;
}
#info.expanded{
position:absolute;
z-index:-1;
margin:300px;
width:500px;
padding:50px;
visibility:visible;
height:auto;
}