jQuery CSS 中的手风琴隐藏选项卡

Question

我有一个带有标记结构的jQuery UI accordion

        <div id="accordion2">
          <h3>title</h3>
                <div>stuff texty</div>
          <h3>title2</h3>
                <div>stuff texty</div>
        </div>

但是，手风琴的第二个选项卡的格式比第一个更简单（即图片更少，因此对移动设备更友好）。

我想在屏幕宽度小于 640 像素时使用媒体查询来隐藏第一个选项卡及其内容。我试着给第一个 h3 和第一个 div 标签一个 class 的 first 然后使用

@media (max-width: 640px) {
        .first {
           display: none;
        }
}

让它们消失...但没有用。有谁知道我该怎么做？

Answer 1

尝试将此作为 CSS3 选项：

#accordion2 h3:first-of-type
{
  display:none;
}

如果您不支持 CSS3，则给第一个标题起一个 class 名称并定位它。