嘿，我的垂直手风琴FAQ表有问题，我想知道是否有人可以提供帮助。我希望这个可以在我正在使用的响应式设计中工作。在iPad或iPhone上时，手风琴的右侧不显示，并且不允许您向右滚动，这实际上使手风琴的完成无法在较小的设备（如电话）上使用。有任何想法吗？？
这是代码：
.accordion {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
font-size: 14px;
border: 1px solid #542437;
border-radius: 10px;
width: 877px;
padding: 10px;
background: #fff;
}
.accordion ul {
list-style: none;
margin: 0;
padding: 0;
}
.accordion li {
margin: 0;
padding: 0;
}
.accordion [type=radio],
.accordion [type=checkbox] {
display: none;
}
.accordion label {
display: block;
font-size: 16px;
line-height: 16px;
background: #652c8f;
border: 1px solid #542437;
color: #d2ae52;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover,
.accordion [type=radio]:checked ~ label,
.accordion [type=checkbox]:checked ~ label {
background: #652c8f;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}
.accordion .content {
padding: 0 10px;
overflow: hidden;
border: 1px solid #fff;
/* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color: #652c8f;
margin: 0 0 10px;
}
.accordion h3 {
color: #652c8f;
padding: 0;
margin: 10px 0;
}
/* Vertical */
.vertical ul li {
overflow: scroll;
margin: 0 0 1px;
}
.vertical ul li label {
padding: 10px;
}
.vertical [type=radio]:checked ~ label,
.vertical [type=checkbox]:checked ~ label {
border-bottom: 0;
}
.vertical ul li label:hover {
border: 1px solid #542437;
/* We don't want the border to disappear on hover */
}
.vertical ul li .content {
height: 0px;
border-top: 0;
}
.vertical [type=radio]:checked ~ label ~ .content,
.vertical [type=checkbox]:checked ~ label ~ .content {
height: 300px;
border: 1px solid #542437;
}<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1" align="center">THE KING CHANEL WAY</label>
<div class="content">
<br />
<p>King Chanel for Hair is pleased to say that we are supplying you with authentic unprocessed Virgin Temple Indian Hair that is donated from the heads of Indian women on an annual basis as a part of their spiritual journey. Once the hair has been
properly sorted and sterilized it is sold directly to you! Our hair is guaranteed to last 2+ years with proper care and maintenance. It is well known that in the Indian culture they use natural products on their hair, opposed to harsh chemicals,
resulting in their hair to be very thick, healthy and strong with an amazing texture! Upon receiving your Virgin Indian Temple Hair you should try your best to continue to use natural products to maintain your tresses. Below we will be providing
some suggestions that should aid in keeping your extensions in tip top shape for many years to come!</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2" align="center">VIRGIN INDIAN HAIR DONT'S:</label>
<div class="content">
<br />
<p>♛ Do NOT use products that contain alcohol! If it is an absolute must, use the product sparingly.</p>
<p>♛ Do NOT sew through the wefts.</p>
<p>♛ Do NOT forget to use a HEAT PROTECTANT when straightening your virgin hair.</p>
<p>♛ Do NOT load up your Indian hair with styling products, that is not necessary with pure virgin hair, the less product the more beautiful it will look :).</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3" align="center">VIRGIN INDIAN HAIR DO'S:</label>
<div class="content">
<br />
<p>♛ DO be sure to keep hair clean by using a gentle sulfate free shampoo at least once per month (or prior to straightening).</p>
<p>♛ DO co-wash at least once per week.</p>
<p>♛ DO detangle hair prior to washing with a wide tooth comb, combing from tip to root.</p>
<p>♛ DO LIGHTLY oil your Indian hair to help maintain its health (we suggest using pure virgin coconut oil).</p>
<p>♛ DO braid down or tie up your hair (pineapple) with a silk/satin scarf at night (although not necessary, this will allow you to have wake up and go hair!).</p>
<p>♛ DO SUBMIT your hair photos to us to share on our social media sites!</p>
</div>
</li>
</ul>
</div>最佳答案
我删除了不需要的list元素，并剥离了CSS一点以使示例更小。
将宽度更改为max-width并允许容器展开/收缩
将高度更改为max-height: 0，并转换为max-height: 500px。这将允许高度与内容匹配，并且不需要滚动条。可以通过分别调整每个内容div的选定最大高度来稍微改善一下。
使用+选择器而不是~仅选择直接div /标签。现在，单击仅选中的标签将获得颜色更改。
工作实例
注意：在此示例中，我删除了transition的前缀。重新考虑是否需要前缀转换为the unprefixed property is heavily supported (including IE10+)。如果您确实使用前缀，则将unprefixed属性放在现代浏览器的下面。
.accordion {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
font-size: 14px;
border: 1px solid #542437;
border-radius: 10px;
max-width: 877px;
padding: 10px;
background: #fff;
}
.accordion [type=radio],
.accordion [type=checkbox] {
display: none;
}
.accordion label {
display: block;
font-size: 16px;
background: #652c8f;
border: 1px solid #542437;
color: #d2ae52;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
transition: all .5s;
padding: 10px 0;
}
.accordion label:hover,
.accordion [type=radio]:checked + label,
.accordion [type=checkbox]:checked + label {
background: #652c8f;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}
.accordion .content {
overflow: hidden;
transition: max-height 1.2s;
max-height: 0;
}
.vertical [type=radio]:checked + label + .content,
.vertical [type=checkbox]:checked + label + .content {
max-height: 500px;
}<div class="accordion vertical">
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1" align="center">THE KING CHANEL WAY</label>
<div class="content">
<p>King Chanel for Hair is pleased to say that we are supplying you with authentic unprocessed Virgin Temple Indian Hair that is donated from the heads of Indian women on an annual basis as a part of their spiritual journey. Once the hair has been properly
sorted and sterilized it is sold directly to you! Our hair is guaranteed to last 2+ years with proper care and maintenance. It is well known that in the Indian culture they use natural products on their hair, opposed to harsh chemicals, resulting
in their hair to be very thick, healthy and strong with an amazing texture! Upon receiving your Virgin Indian Temple Hair you should try your best to continue to use natural products to maintain your tresses. Below we will be providing some suggestions
that should aid in keeping your extensions in tip top shape for many years to come!</p>
</div>
<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2" align="center">VIRGIN INDIAN HAIR DONT'S:</label>
<div class="content">
<p>♛ Do NOT use products that contain alcohol! If it is an absolute must, use the product sparingly.</p>
<p>♛ Do NOT sew through the wefts.</p>
<p>♛ Do NOT forget to use a HEAT PROTECTANT when straightening your virgin hair.</p>
<p>♛ Do NOT load up your Indian hair with styling products, that is not necessary with pure virgin hair, the less product the more beautiful it will look :).</p>
</div>
<input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3" align="center">VIRGIN INDIAN HAIR DO'S:</label>
<div class="content">
<p>♛ DO be sure to keep hair clean by using a gentle sulfate free shampoo at least once per month (or prior to straightening).</p>
<p>♛ DO co-wash at least once per week.</p>
<p>♛ DO detangle hair prior to washing with a wide tooth comb, combing from tip to root.</p>
<p>♛ DO LIGHTLY oil your Indian hair to help maintain its health (we suggest using pure virgin coconut oil).</p>
<p>♛ DO braid down or tie up your hair (pineapple) with a silk/satin scarf at night (although not necessary, this will allow you to have wake up and go hair!).</p>
<p>♛ DO SUBMIT your hair photos to us to share on our social media sites!</p>
</div>
</div>关于jquery - 垂直 Accordion 表不适用于响应式Web设计布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26665805/