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设置了它。

它背后的逻辑是默认隐藏这个“弹出”，然后利用jQuery点击事件来切换将显示所述弹出窗口的类。

您可以查看 fiddle 以更好地理解

这是我用来控制弹出窗口的jQuery。

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

我希望这就是你要找的东西。

Answer 2

这是小提琴。我从JavaScript中删除了CSS，只是在DOM对象上交换了className。用这种方式阅读会容易得多。

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

使信息框飞出并扩展

2 个答案: