如何使 div 向右浮动并堆叠在一起

Question

I am trying to create expand/collapse section.我正在尝试创建展开/折叠部分。 Please find the code here.请在此处找到代码。 "Section 1" and "section 2" is working correctly, where as "section 3" and "Section 4" is not working. “第 1 部分”和“第 2 部分”工作正常，而“第 3 部分”和“第 4 部分”不起作用。 When "expand" is clicked on "section 3", I want section 1, 2 and 4 stacked on right side.当在“第 3 部分”上单击“展开”时，我希望第 1、2 和 4 部分堆叠在右侧。

 function expand(id) { $('.main > div').each(function(i,item) { if(i == id) { $(item).removeClass('normal'); $(item).addClass('expand'); } else { $(item).removeClass('normal'); $(item).addClass('collapse'); } }); } function collapse(id) { $('.main > div').each(function(i,item) { if(i == id) { $(item).removeClass('expand'); $(item).addClass('normal'); } else { $(item).removeClass('collapse'); $(item).addClass('normal'); } }); }

 html{width:100%;margin:0;padding:0} body{width:100%;} .main{width:98%; height:300px; border:1px solid #333} .main > div {border:1px solid #ccc;margin:2px;} .normal{width:45.5%;height:48%;float:left;} .expand {width:69.7%;height:98%;float:left;position:relative;top:0;left:0} .collapse {width:25.7%;height:60px;float:right;overflow-y:hidden;overflow-x:hidden;position:relative;right:0;top:auto} .normal .btnCollapse{display:none;} .expand .btnExpand{display:none;} .collapse .btnCollapse{display:none;} .collapse .btnExpand{display:none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <div class="main"> <div class="normal"> section 1 <button class="btnExpand" onclick="expand(0)"> expand</button> <button class="btnCollapse" onclick="collapse(0)"> collapse</button> </div> <div class="normal"> section 2<button class="btnExpand" onclick=expand(1)> expand</button> <button class="btnCollapse" onclick=collapse(1)> collapse</button> </div> <div class="normal"> section 3<button class="btnExpand" onclick=expand(2)> expand</button> <button class="btnCollapse" onclick=collapse(2)> collapse</button> </div> <div class="normal"> section 4<button class="btnExpand" onclick=expand(3)> expand</button> <button class="btnCollapse" onclick=collapse(3)> collapse</button> </div> </div> </body> </html>

Answer 1

You have to make a few CSS changes, and JavaScript ones as well.您必须对 CSS 和 JavaScript 进行一些更改。

CSS : CSS :

Set position of main element to relative .将main元素的position设置为relative 。
Set position of .expand to absolute .将.expand position设置为absolute 。
Make a class clear and add clear: both; clear类并添加clear: both; in it.在里面。

JS : JS：

On expanding, add clear class to the elements to be collapsed.展开时，为要折叠的元素添加clear类。
On collapsing, remove clear class from elements to be set to normal .折叠时，从要设置为normal元素中删除clear类。

 var parents = $('.main > div'); function expand(id) { parents.eq(id).siblings().removeClass('normal').addClass('collapse clear'); parents.eq(id).removeClass('normal').addClass('expand'); } function collapse(id) { parents.eq(id).addClass('normal').removeClass('expand'); parents.eq(id).siblings().addClass('normal').removeClass('collapse clear'); }

 html { width: 100%; margin: 0; padding: 0 } body { width: 100%; } .main { width: 98%; height: 300px; position: relative; border: 1px solid #333 } .main>div { border: 1px solid #ccc; margin: 2px; } .normal { width: 49.5%; height: 48%; float: left; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .expand { width: 69.7%; height: 98%; float: left; position: absolute; top: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; left: 0; } .collapse { width: 25.7%; height: 60px; float: right; overflow-y: hidden; overflow-x: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; position: relative; right: 0; top: auto; } .normal .btnCollapse { display: none; } .expand .btnExpand { display: none; } .collapse .btnCollapse { display: none; } .collapse .btnExpand { display: none; } .clear { clear: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <div class="main"> <div class="normal"> section 1 <button class="btnExpand" onclick="expand(0)"> expand</button> <button class="btnCollapse" onclick="collapse(0)"> collapse</button> </div> <div class="normal"> section 2<button class="btnExpand" onclick=expand(1)> expand</button> <button class="btnCollapse" onclick=collapse(1)> collapse</button> </div> <div class="normal"> section 3<button class="btnExpand" onclick=expand(2)> expand</button> <button class="btnCollapse" onclick=collapse(2)> collapse</button> </div> <div class="normal"> section 4<button class="btnExpand" onclick=expand(3)> expand</button> <button class="btnCollapse" onclick=collapse(3)> collapse</button> </div> </div> </body> </html>

如何使 div 向右浮动并堆叠在一起

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-26 05:33:46

如何使 div 向右浮动并堆叠在一起

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-26 05:33:46

解决方案1
0 已采纳 2020-08-26 05:33:46