使信息框飞出并展开

Question

我正在尝试制作一个圆圈，单击该圆圈时，会导致一个带有文本的框飞出并展开。然后，再次单击时，我希望框折叠并再次变得不可见。我已经包含了我的代码。我让盒子飞了出去，但我似乎无法让它倒塌。请帮忙

HTML/Javascript

<!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>

CSS

#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;
}

Answer 1

mhunt2015 也许这就是您要找的。我用 jQuery.

设置了这个

其背后的逻辑是默认隐藏此 "flyout"，然后利用 jQuery 单击事件切换 class，这将显示所述弹出窗口。

您可以查看此fiddle以获得更好的理解

这是我用来控制弹出按钮的jQuery。

$("#circle").click(function(){
    $("#info").toggleClass("active");
});

希望这就是您要找的。

Answer 2

这是 fiddle。我从 JavaScript 中删除了 CSS 并简单地交换了 DOM 对象上的类名。这样阅读起来就容易多了。

https://jsfiddle.net/m5ppyw08/

此外，我在这个例子中没有使用 jQuery。

HTML:

<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>

CSS:

#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;
}

使信息框飞出并展开

Making an Information Box Fly Out and Expand

html

javascript

css

onclick