Html 响应性：标签与手风琴

我找到了这个密码

非常有用。在响应模式下，选项卡变为手风琴，但问题是在单击另一个手风琴选项卡之前，手风琴无法关闭。我想实现的是，它应该是一个完美的手风琴。单击“打开”并再次单击以关闭时。我在Stack中看到了另一个解决方案，但它的工作方式与我描述的不同。有人能帮忙吗

//选项卡式内容
// http://www.entheosweb.com/tutorials/css/tabs.asp
$（“.tab_content”）.hide（）；
$（“.tab_content:first”）.show（）；
/*如果处于选项卡模式*/
$（“ul.tabs li”）。单击（函数（）{
$（“.tab_content”）.hide（）；
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab.fadeIn（）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（“.tab\u drawer\u heading[rel^=”+activeTab+“]”）addClass（“d\u active”）；
});
/*如果处于抽屉模式*/
$（“.tab\u drawer\u heading”）。单击（函数（）{
$（“.tab_content”）.hide（）；
var d_activeTab=$（this.attr（“rel”）；
$（“#”+d_activeTab）.fadeIn（）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（此）.addClass（“d_活动”）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（“ul.tabs li[rel^='”+d_activeTab+“']”）addClass（“active”）；
});
/*额外类“tab_last”
将边框添加到右侧的步骤
最后一页*/
$（'ul.tabs li'）.last（）.addClass（“tab_last”）
ul.tabs{
保证金：0；
填充：0；
浮动：左；
列表样式：无；
高度：32px；
边框底部：1px纯色灰色；
宽度：100%；
}
李先生{
浮动：左；
保证金：0；
光标：指针；
填充：0px 11px；
高度：自动；
线高：31px；
边框顶部：1px实心#333；
左边框：1px实心#333；
边框底部：1px实心#333；
背景色：#666；
颜色：#ccc；
溢出：隐藏；
位置：相对位置；
}
.tab_最后{
右边框：1px实心#333；
}
李：悬停{
背景色：#ccc；
颜色：#333；
}
ul.tabs li.active{
背景色：#fff；
颜色：#333；
边框底部：1px实心#fff；
显示：块；
}
.tab_容器{
边框：1px实心#333；
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#fff；
溢出：自动；
}
.tab_内容{
填充：20px；
显示：无；
}
.制表符\u抽屉\u标题{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.标签{
显示：无；
}
.制表符\u抽屉\u标题{
背景色：#ccc；
颜色：#fff；
边框顶部：1px实心#333；
保证金：0；
填充：5px20px；
显示：块；
光标：指针；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
d_活动{
背景色：#666；
颜色：#fff；
}
}


选项卡1
表2
表3
表4

表1
表1内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。多涅克·梅特斯·奥古斯

表2
表2内容
Nunc dui velit，欧盟十字勋章，欧盟nisi。无排卵前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭

表3
表3内容
健康饮食。Etiam nec是饮食精英。佩伦特式的装饰，权杖式的装饰，前庭式的装饰

表4
表4内容
整数ultrices lacus位于amet lorem viverra consequat。智人之间的拉齐尼亚（Vivamus lacinia interdum sapien）非福西布斯（faucibus）。迈塞纳斯·比本杜姆（Maecenas bibendum）、奥特里斯·维韦拉（ultrices viverra）的莱克托斯（lectus）、麦格纳·埃古斯塔斯·麦格纳（Elite magna egestas magna）以及一位令人敬佩的毛里斯·贾斯托·内克·厄罗斯（mauris justo

您可以简单地使用if语句来检查目标语句是否有活动类，如果该语句的计算结果为true，则只需隐藏它。下面是一个示例，其中所有语句都处于隐藏状态


$（“ul.tabs li”）。单击（函数（）{
if（$（this.attr（“类”）=‘活动’| |$（this.attr（“类”）=‘选项卡(u上次活动’）{
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab）.fadeOut（）；
$（此）.removeClass（“活动”）；
$（“.tab\u drawer\u heading[rel^=”+activeTab+“]]）；
}否则{
$（“.tab_content”）.hide（）；
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab.fadeIn（）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（“.tab\u drawer\u heading[rel^=”+activeTab+“]”）addClass（“d\u active”）；
}
});
/*如果处于抽屉模式*/
$（“.tab\u drawer\u heading”）。单击（函数（）{
$（“.tab_content”）.hide（）；
var d_activeTab=$（this.attr（“rel”）；
$（“#”+d_activeTab）.fadeIn（）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（此）.addClass（“d_活动”）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（“ul.tabs li[rel^='”+d_activeTab+“']”）addClass（“active”）；
});
/*额外类“tab_last”
将边框添加到右侧的步骤
最后一页*/
$（'ul.tabs li'）.last（）.addClass（“tab_last”）
ul.tabs{
保证金：0；
填充：0；
浮动：左；
列表样式：无；
高度：32px；
边框底部：1px纯色灰色；
宽度：100%；
}
李先生{
浮动：左；
保证金：0；
光标：指针；
填充：0px 11px；
高度：自动；
线高：31px；
边框顶部：1px实心#333；
左边框：1px实心#333；
边框底部：1px实心#333；
背景色：#666；
颜色：#ccc；
溢出：隐藏；
位置：相对位置；
}
.tab_最后{
右边框：1px实心#333；
}
李：悬停{
背景色：#ccc；
颜色：#333；
}
ul.tabs li.active{
背景色：#fff；
颜色：#333；
边框底部：1px实心#fff；
显示：块；
}
.tab_容器{
边框：1px实心#333；
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#fff；
溢出：自动；
}
.tab_内容{
填充：20px；
显示：无；
}
.制表符\u抽屉\u标题{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：480p）