繁体   English   中英

单击div以显示隐藏的内容时,在div之间留出空间

[英]Make room between divs when clicking a div to show hidden content

我想做的就是添加功能,这样,如果我单击任何div栏,它下面的空间就会打开,使我能够看到隐藏的div。 单击原始栏将重新隐藏隐藏的div,并删除div栏之间的扩展空间。

当隐藏的div被隐藏时,布局如下所示:

单击div之前

单击div栏时,布局将展开,以便在div栏的行之间可见隐藏的div。 条形图之间的空间会扩大,以便为隐藏的div腾出空间。 (蓝色的“隐藏2”)

单击栏2时显示隐藏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)。

如何才能做到这一点?

我的代码笔在这里:
https://codepen.io/Chris_Nielsen/pen/xWNmYy

我已经看到使用Javascript解决此问题的简单方法。 从理论上讲,您可以将div设置为显示“:hover”(sp?),但实际上我从未见过。 值得探索吗?

摘要/详细信息解决方案由于内置的功能而无法切换-div尚不具备某些功能

jQuery解决方案很简单,例如:

$(function() {
    $(".bar").click(function() {
        $(this).next(".hidden-data").toggle();
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM