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

非形式

我对使用可点击的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>

或如以下小提琴所示:https : //jsfiddle.net/z1je8p38/

有办法做到这种效果吗?还是我的整个方法很糟糕?

任何帮助表示赞赏。

尼克·德莱尼(Nick Delaney)

一种方法是在divText div的内部添加选项卡,将它们默认为隐藏,直到您希望它切换到另一个视图。然后隐藏原始选项卡。

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块将像这样...

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

看到我的小提琴... https://jsfiddle.net/4fwwevaf/3/稍后您显然可以添加手风琴功能。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章