javascript - 如何在单击时将弹性框的下排项目进一步向下推以为其他内容创建空间?
问题描述
我创建了一个 HTML flex-box,它根据从 API 返回的数据显示图像,有点像这样:- [![THIS][1]][1]
现在我想在单击特定的 div 元素时显示其他数据。因此,较低的 div 进一步向下移动并为“扩展”部分创建空间 [![说这里产生了 tiffin 的空间][2]][2 ]
解决方案
为什么不在每个特定的弹性数据行下方插入一个占位符弹性行?
我创建了一个演示,您可以在其中运行此代码段并单击每一行以确定它是否适合您:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.flex-box {
width: 800px;
display: flex;
flex-direction: column;
}
.flex-box__nav {
display: flex;
}
.flex-box__item {
flex: 1;
border: 1px solid black;
}
.flex-box__collapse {
display: none;
background: red;
}
</style>
<div class="flex-box">
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
</div>
<script>
function clickHanlder() {
var isCollapse = true;
return function () {
this.nextSibling.nextSibling.style.display = isCollapse ? "block" : "none";
isCollapse = !isCollapse;
}
}
document.querySelectorAll(".flex-box__nav").forEach(function (val) {
val.onclick = clickHanlder();
});
</script>
</body>
</html>
推荐阅读
- symfony - message=给定邮箱中的地址 [AKIAQ5NIGV4UVXS6AHUF] 不符合 RFC 2822, 3.6.2
- java - 如何在 ARCore 中序列化会话对象?
- qt - 如何在 QML 的组合框中使数值模型从 1 开始
- microsoft-graph-api - 不再可能确定 Microsoft Teams 的聊天记录
- grafana - 如何在 Grafana 插件中导入和使用第三方 AngularJS 指令
- eclipse - 为什么在 Eclipse Oxygen 中安装时 UML Designer 对自身有依赖关系
- java - 如何通过单击通知操作按钮删除通知?
- angular - 节点模块库中 Window.postMessage 的安全风险
- grails - 如何修复“无此类属性”的 grailed 错误 500 内部服务器错误。““ 上课'
- java - 在 Junit 中,如何将单个测试用例添加到测试套件中?