CSS中的jQuery手风琴隐藏选项卡 [英] jQuery accordion hiding tabs in CSS

问题描述

我有一个带有标记结构的 jQuery UI手风琴

I have a jQuery UI accordion with Markup structure

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

但是，手风琴的第二个标签的格式比第一个标签的格式简单(即，图片较少，因此对移动设备更友好).

However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).

当屏幕宽度小于640px时，我想使用媒体查询来隐藏第一个标签及其内容.我尝试为第一个h3和第一个div标签赋予first类，然后使用

I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used

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

要使它们消失...但这没有用.有人知道我该怎么做吗?

To make them disappear... but it didn't work. Does anyone know how I can go about doing this?

推荐答案

将此作为CSS3选项:

try this as a CSS3 option:

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

如果您不支持CSS3，请首先给该标题指定一个类名，然后将其定位.

if you cannot support CSS3 then give that first heading a class name and target that.

这篇关于CSS中的jQuery手风琴隐藏选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！