0
我在1页有4列,每个都有一个按钮来执行功能来折叠/展开div并隐藏其他列。 再次点击该按钮会将页面移动到初始状态。流程如下:使用jquery展开,折叠功能
| Col 1 | Col2 | Col3 | Col4 |
| Btn1 | btn2 | btn3 | btn4 |
当我点击BTN2例如页面变为:
| Col 2 | (宽度= 100%)
| Btn 2 |
我如何能做到这一点与jQuery
的HTML代码在这里:
<div class="block-panel col s3">
<div class="col s12 headding-panel">
<div class="col s10">
abcxyz
</div>
<div class="col s2">
<a class="waves-effect waves-light btn">btn1</a>
</div>
</div>
<div class="block-panel-body">
CONTENT GOES HERE
</div>
</div>
<div class="block-panel col s3">
<div class="col s12 headding-panel">
<div class="col s10">
abcxyz
</div>
<div class="col s2">
<a class="waves-effect waves-light btn">btn2</a>
</div>
</div>
<div class="block-panel-body">
CONTENT GOES HERE
</div>
</div>
<div class="block-panel col s3">
<div class="col s12 headding-panel">
<div class="col s10">
abcxyz
</div>
<div class="col s2">
<a class="waves-effect waves-light btn">btn3</a>
</div>
</div>
<div class="block-panel-body">
CONTENT GOES HERE
</div>
</div>
<div class="block-panel col s3">
<div class="col s12 headding-panel">
<div class="col s10">
abcxyz
</div>
<div class="col s2">
<a class="waves-effect waves-light btn">btn4</a>
</div>
</div>
<div class="block-panel-body">
CONTENT GOES HERE
</div>
</div>
刚刚找到了解决办法,这是相当类似你们,谢谢 – vicnoob