javascript - 使可点击的 div 标题重新排列以响应较小的宽度

Question

我有一个关于使用可点击的 div 在 div 下方区域显示文本/内容的问题。单击 div 行下方的 div 时显示内容。

请查看以下 jsfiddle 中的布局:https://jsfiddle.net/4fwwevaf/

问题是:

如何让上面的 div 按钮在较小的设备/较小的窗口上重新排列。具体来说，我希望选项卡自行重新排列，以便在每个选项卡标题下方显示适当的内容，例如:

<div class="tabBox-3">Tab 1</div>
<div class="divText" id="div1">
    <h1>Tab 1 content</h1>
    <p>Tab 1 content text</p>
</div>

<div class="tabBox-3">Tab 2</div>
<div class="divText" id="div2">
    <h1>Tab 2 content</h1>
    <p>Tab 2 content text</p>
</div>

<div class="tabBox-3">Tab 3</div>
<div class="divText" id="div3">
    <h1>Tab 3 content</h1>
    <p>Tab 3 content text</p>
</div>

或如以下 fiddle 所示:https://jsfiddle.net/z1je8p38/

有没有办法实现这种效果？还是我的整个方法很糟糕？

感谢任何帮助。

Answer 1

一种方法是在 divText div 中也添加选项卡，将它们默认隐藏，直到您希望它切换到另一个 View 。然后隐藏原来的标签页。

CSS 可能是这样的......

.divText .tabBox-3{display:none;}

@media screen and (max-width: 480px) {

.tabBox-3{
  width:100%;
}

.tabRow{
  display:none;
 }

.divText>.tabBox-3{
  display:block;
 }

.divText{
  display:block !important;
 }

那么你的 divText block 将是这样的......

  <div class="divText" id="div1">
      <div class="tabBox-3">
        Tab 1
      </div>
      <h1> Div 1 content</h1>
      <p> div 1 content text</p>
  </div>

看我的 fiddle ... https://jsfiddle.net/4fwwevaf/3/您显然可以稍后添加 Accordion 功能。