我试图在页面小于480像素时将垂直制表符转换为手风琴视图，如果不是，则返回垂直制表符视图。我尝试使用@media screen and (min-width: 480px) {} +添加垂直标签CSS样式，但最终我没有使用它。然后我尝试在线搜索如何做到这一点。我最终找到了一些例子，但是他们使用了不同的方法来完成这个效果。当屏幕小于480px时，如何将此垂直制表变换为手风琴？
下面的链接是我想要的效果的一个例子。 （当查看示例时，调整窗口大小以查看垂直制表符/手风琴效果）
示例：https://codepen.io/thejettmiller/pen/hqnua
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
.tab_drawer_heading {
display: none;
}
@media screen and (max-width: 781px) {
ul.tabs {
display: none;
}
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.tab_drawer_heading {
background-color: #ccc;
color: #000;
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
&:hover {
background: #ccc;
}
}
.d_active {
background: #fff;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li><a href="index.html">Tab One</a></li>
<li class="selected"><a href="index.html">Tab Two</a></li>
<li><a href="index.html">Tab Three</a></li>
<li><a href="index.html">Tab Four</a></li>
</ul>
<div class="tab_container">
<article>
<h2 class="d_active tab_drawer_heading">Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>
答案 0 :(得分：2)
我相信这就是你所追求的：
Codepen链接：https://codepen.io/teodragovic/pen/wqEvOV
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$("article").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li a").removeClass("selected");
$("ul.tabs li a[rel^='"+d_activeTab+"']").addClass("selected");
});body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
.tabs {
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
.tabs li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
.tab_container {
display: block;
background: #fff;
width: 80%;
min-height: 500px;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
padding: 10px 3% 3% 3%;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
@media screen and (max-width: 781px) {
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.d_active {
background: #fff;
}
}
.tabs {
display: none;
}
// style accordion links
.tab_drawer_heading {
margin: 0;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 3%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
@media screen and (min-width: 480px) {
.tab_container {
float: left;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
width: 64%;
}
.tabs {
display: block;
}
.tab_drawer_heading {
display: none;
}
article {
padding: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li><a rel="tab1" href="index.html">Tab One</a></li>
<li><a rel="tab2" href="index.html">Tab Two</a></li>
<li><a rel="tab3" href="index.html">Tab Three</a></li>
<li><a rel="tab4" href="index.html">Tab Four</a></li>
</ul>
<div class="tab_container">
<h3 class="tab_drawer_heading" rel="tab1">Tab One</h3>
<article id="tab1">
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab2">Tab Two</h3>
<article id="tab2">
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab3">Tab Three</h3>
<article id="tab3">
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab4">Tab Four</h3>
<article id="tab4">
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>
您的代码遗漏/错误：
<h3>标记作为手风琴链接（如果您希望它们也是内容的标题，则在宽度小于480px时隐藏文章标题）并应用.tab_drawer_heading该元素而不是文章标题元素。rel属性和id以使“抽屉”JS代码正常工作.selected课程，而不是.active上的<li>。答案 1 :(得分：0)
在媒体查询下添加一些样式，它的工作正常。
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end readybody {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
@media screen and (max-width: 480px) {
#vertical_tab_nav ul {
width: 100%;
border-radius: 10px 10px 0 0;
}
#vertical_tab_nav li {
display: inline-block;
width: 24%;
height: auto;
}
#vertical_tab_nav div {
width: 94%;
border-radius: 0 0 10px 10px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul>
<li><a href="index.html">Tab One</a></li>
<li class="selected"><a href="index.html">Tab Two</a></li>
<li><a href="index.html">Tab Three</a></li>
<li><a href="index.html">Tab Four</a></li>
</ul>
<div>
<article>
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water, health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist. The government should intensify searching operations in trains.</p>
</article>
</div>
</section>