![](/img/trans.png)
[英]Split page into many numbered Divs and reload whole page when clicking to show the hidden content
[英]Make room between divs when clicking a div to show hidden content
我想做的就是添加功能,这样,如果我单击任何div栏,它下面的空间就会打开,使我能够看到隐藏的div。 单击原始栏将重新隐藏隐藏的div,并删除div栏之间的扩展空间。
当隐藏的div被隐藏时,布局如下所示:
单击div栏时,布局将展开,以便在div栏的行之间可见隐藏的div。 条形图之间的空间会扩大,以便为隐藏的div腾出空间。 (蓝色的“隐藏2”)
这不是其他问题的重复,因为所有其他问题都比较狭窄,并且没有解决我尝试使用divs实现的功能。
.bar { width: 400px; height: 30px; border: solid 1px #aaa; border-radius: 8px; padding: 20px; font-size: 24px; margin: 15px; background-color: #ccc; z-index: -2; } .hidden-data { display: none; width: 350px; height: 70px; border: solid 1px #aaa; border-radius: 8px; padding: 20px; font-size: 24px; margin: 15px; background-color: #e6eeff; z-index: 1; }
<div class="bar" id="bar1">Bar 1</div> <div class="hidden-data" id="hidden1">Hidden 1</div> <div class="bar" id="bar2">Bar 2</div> <div class="hidden-data" id="hidden2">Hidden 2</div> <div class="bar" id="bar3">Bar 3</div> <div class="hidden-data" id="hidden3">Hidden 3</div> <div class="bar" id="bar4">Bar 4</div> <div class="hidden-data" id="hidden4">Hidden 4</div>
我已经看到使用<ul> <li>的解决方案和使用复选框的解决方案,但是我都没有使用。 (而且我无法与我的div一起工作)
我见过使用跨度的解决方案,但仅支持一行。 如果添加多个行,则两行都将响应单击。 https://jsfiddle.net/tzfa81cp/73/
我看到了一个使用<summary> <details>的解决方案,它看起来像是我想要的功能的纯文本版本,但是似乎大多数浏览器都不支持它。 (而且我无法使其与div一起使用。) http://jsfiddle.net/thurstanh/emtAm/2/
如果有CSS解决方案,那将是一个很好的选择,但是绝对可以接受JavaScript解决方案。 我是jQuery新手
重申这个问题:我希望能够单击Bar 1,并在其下方打开一个框“ Hidden 1”,将其他div栏向下移动以腾出空间。 然后,要关闭隐藏的div,请再次单击栏1。 (或点击隐藏的div中的x)。
如何才能做到这一点?
我已经看到使用Javascript解决此问题的简单方法。 从理论上讲,您可以将div设置为显示“:hover”(sp?),但实际上我从未见过。 值得探索吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.