代码之家 › 专栏 › 技术社区 › user3218338

Zurb基础手风琴CSS断点

accordion zurb-foundation tabs css

user3218338 · 技术社区 · 12 年前

我需要帮助找出我的zurb基础代码中的断点。代码的作用是添加制表符和手风琴。用于手机和平板电脑的大屏幕和手风琴式视图的选项卡。然而,我还没有弄清楚如何更改断点(意味着它隐藏选项卡并显示手风琴的大小)。

这是基础css文件(对于stackoverflow来说太大了) http://pastebin.com/eSgHmSgK

这是 HTML格式

<section class="center-menu">
    <div class="center-menu-container">
      <div class="hide-for-small">
        <dl class="tabs" data-tab="">
          <dd class="active" id="#panel1dd" ><a href="#panel1">IT</a></dd>

          <dd id="#panel2dd"><a href="#panel2">Telefoni</a></dd>

          <dd id="#panel3dd"><a href="#panel3">IT-SÃ¤kerhet</a></dd>

        </dl>

        <div class="tabs-content">
          <div class="content active" id="panel1">
            <p>This is the first panel of the basic tab example. This is the first
            panel of the basic tab example.</p>
          </div>

          <div class="content" id="panel2">
            <p>This is the second panel of the basic tab example. This is the
            second panel of the basic tab example.</p>
          </div>

          <div class="content" id="panel3">
            <p>This is the third panel of the basic tab example. This is the third
            panel of the basic tab example.</p>
          </div>

        </div>
      </div>

    <dl class="accordion show-for-small" data-accordion>
      <ul class="small-block-grid-1 medium-block-grid-3">
        <li>
          <dd>
            <a href="#panel1c">Accordion 1</a>
            <div id="panel1c" class="content">
              Panel 1. Lorem ipsum dolor
            </div>
          </dd>
          <dd>
            <a href="#panel2c">Accordion 2</a>
            <div id="panel2c" class="content">
              Panel 2. Lorem ipsum dolor
            </div>
          </dd>
          <dd>
            <a href="#panel3c">Accordion 3</a>
            <div id="panel3c" class="content">
              Panel 3. Lorem ipsum dolor
            </div>
          </dd>
        </li>
          </dd>
        </li>
      </ul>
    </dl>

    </div>

    </section>

提前感谢!

1 回复 | 直到 12 年前

Matt Smith 12 年前

在基础5中,当出现以下情况时,将显示选项卡并隐藏手风琴 @media only screen and (min-width: 40.063em) 在浏览器中访问;这个 .hide-for-small 显示选项卡和 .show-for-small 规则隐藏手风琴。

/* Medium Displays: 641px and up */
@media only screen and (min-width: 40.063em) {
    .hide-for-small,
    ... {
        display: inherit !important;
    }
    .show-for-small,
    ... {
        display: none !important;
    }
}

否则 .show表示小型 规则显示手风琴:

.show-for-small {
    display: inherit !important;
}