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>

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

有没有办法做这种效果？或者我的整个方法可怕吗？

感谢任何帮助。

Answer 1

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select  multiple="true">    
  <option >Lorem ipsum dolor sit amet Molestias,</option>
  <option >Consectetur adipisicing elit.</option>
  <option >Similique alias</option>
  <option >Maiores fugiat voluptate</option>
  <option >Molestiae modi amet eaque qui atque eius</option>
  <option >Magni, doloremque hic consequatur minus</option>
  <option >Voluptatem libero maxime porro.</option>
</select>

}

那么你的divText块会是这样的......

.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;
 }

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

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

1 个答案: