Question

我想知道当窗口变小时是否有基础4选项卡进入下拉列表的选项。

<div class="section-container auto" data-section>
  <section class="active">
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

此处，链接位于

内。

Answer 1

在基础中，您可以使用可见性类来根据屏幕大小控制元素。使用可见性类show-for-only-only和hide-for-small-only我们呈现div 分别

<div class="show-for-small-only">
    <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
    <ul id="drop1" data-dropdown-content class="f-dropdown">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>
    </div>

<div class="hide-for-small-only">
<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>
  <div class="content" id="panel2-3">
    <p>Third panel content goes here...</p>
  </div>
  <div class="content" id="panel2-4">
    <p>Fourth panel content goes here...</p>
  </div>
</div>

</div>

基础4 - 选项卡到响应式下拉列表

1 个答案: