jquery - 垂直 Accordion 表不适用于响应式网页设计布局

Question

嘿，我有一个垂直 Accordion 常见问题解答表的问题，我想知道是否有人能够提供帮助。我希望它能在我正在使用的响应式设计中工作。在 iPad 或 iPhone 上时， Accordion 的右侧不会显示，也不允许您向右滚动，这实际上使它无法在手机等较小的设备上使用。有任何想法吗？？

代码如下:

.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>

Answer 1

我删除了不需要的列表元素，并稍微剥离了 CSS 以使示例更小。

• 将宽度更改为 max-width 并允许容器扩展/收缩

• 将高度更改为 max-height: 0，并过渡到 max-height: 500px。这将允许高度匹配内容并消除滚动条的需要。可以通过为每个内容 div 分别调整选定的最大高度来稍微改进。

• 使用 + 选择器而不是 ~ 只选择直接的 div/标签。现在，只有单击选定的标签才会改变颜色。

工作示例

注意:在本示例中，我删除了transition 的前缀。重新考虑前缀转换的需要为 the unprefixed property is heavily supported (including IE10+) .如果您确实使用前缀，则将无前缀属性放在现代浏览器的下方。

.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>