html - 我的纯 CSS 手风琴在其中一个部分打开并且侧面的 V 形不正常时侧向移动

Question

我在 codepen 上构建了一个纯 CSS Bootstrap 手风琴。它的样式使得每个部分都有一个可用的按钮，可用于打开和关闭相关部分，以及单击部分标题。我有两个问题，我不明白如何解决：

1. 当您从所有部分都关闭的状态转到其中一个打开的状态时，手风琴左侧有一个非常轻微的移动，这令人不快。当所有部分再次折叠时，手风琴移回右侧。我无法弄清楚为什么会这样。请有人帮我理解为什么以及如何解决它？

2. 右对齐的人字形表示当部分折叠时指向右侧，当部分展开时指向下方。最初加载手风琴时，在打开任何部分之前，由于某种原因，所有人字形都指向下方。一旦其中一个被打开，它们就会正常运行。我对他们做错了什么？

.container {
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  margin: 50px auto 0 auto;
  width: 80%;
}

.tiles {
  display: block;
  margin: 30px 0 30px 0;
  overflow: hidden;
}

.tiles .button {
  color: #fff;
  display: block;
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
  padding: 20px 10px;
  margin: 0 0 30px 0;
  text-align: center;
  border: 2px solid #0be4cb;
}

.tiles .button.turquoise {
  background: #0be4cb;
}

.tiles .button.turquoise:hover {
  text-decoration: none;
  color: #0be4cb;
  background: #fff;
}

.tiles .button.turquoise:focus {
  text-decoration: none;
  color: #0be4cb;
  background: #fff;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0;
}

.panel-group .panel+.panel {
  margin-top: 0;
}

.panel-default {
  border: none;
}

.panel-heading {
  padding: 20px 15px;
  border: none;
  border-radius: 0;
}

.panel-heading .accordion-toggle {
  color: #333;
}

.panel-heading .accordion-toggle:hover {
  color: #0be4cb;
  text-decoration: none;
}

.panel-default>.panel-heading {
  color: #333;
  background: none;
  border-top: 1px solid #ddd;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border: none;
}

.panel-heading .accordion-toggle:after {
  content: "\276F";
  float: right;
  color: grey;
  transition: all .35s;
  transform: rotate(90deg);
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\276F";
  transform: rotate(0deg);
}

<div class="container">
  <!-Responsive Menu Buttons->
  <div class="tiles">
    <!-Button Row->
    <div class="row">
      <!-Menu Button 1->
      <div class="col-lg-4 col-md-4">
        <a class="collapsed button turquoise" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseONE" aria-expanded="false" aria-controls="collapseONE">
            Category 1
            </a>
      </div>
      <!-End of Menu Button 1->
      <!-Menu Button 2->
      <div class="col-lg-4 col-md-4">
        <a class="collapsed button turquoise" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTWO" aria-expanded="false" aria-controls="collapseTWO">
            Category 2
            </a>
      </div>
      <!-End of Menu Button 2->
      <!-Menu Button 3->
      <div class="col-lg-4 col-md-4">
        <a class="collapsed button turquoise" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTHREE" aria-expanded="false" aria-controls="collapseTHREE">
            Category 3
            </a>
      </div>
      <!-End of Menu Button 3->
    </div>
    <!-End of Button Row->
  </div>
  <!-End of Responsive Menu Buttons->
  <!-Information Panel Group->
  <div class="panel-group" id="accordion">

    <!-Panel for Category 1->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseONE">
                Category 1
              </a>
        </h4>
      </div>
      <div id="collapseONE" class="panel-collapse collapse">
        <div class="panel-body">
          <h5>Text For Category One</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum facilisis magna, nec mattis ante gravida ac. Integer et est non tortor ultricies feugiat. Nam aliquam eros sit amet diam dictum tristique. Integer sodales tellus ut feugiat
            ornare. Suspendisse augue tellus, laoreet at mauris eu, placerat consequat urna. Aliquam porttitor quis justo sed tincidunt. Cras congue leo luctus efficitur tempor. Etiam fringilla elementum augue, et semper est dignissim ut. Maecenas massa
            dui, efficitur id mi eget, dignissim cursus enim.</p>
        </div>
      </div>
    </div>
    <!-End of Panel for Category 1->
    <!-Panel for Category 2->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTWO">
                Category 2
              </a>
        </h4>
      </div>
      <div id="collapseTWO" class="panel-collapse collapse">
        <div class="panel-body">
          <h5>Text For Category Two</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum facilisis magna, nec mattis ante gravida ac. Integer et est non tortor ultricies feugiat. Nam aliquam eros sit amet diam dictum tristique. Integer sodales tellus ut feugiat
            ornare. Suspendisse augue tellus, laoreet at mauris eu, placerat consequat urna. Aliquam porttitor quis justo sed tincidunt. Cras congue leo luctus efficitur tempor. Etiam fringilla elementum augue, et semper est dignissim ut. Maecenas massa
            dui, efficitur id mi eget, dignissim cursus enim.</p>
        </div>
      </div>
    </div>
    <!-End of Panel for Category 2->
    <!-Panel for Category 3->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTHREE">
                Category 3
              </a>
        </h4>
      </div>
      <div id="collapseTHREE" class="panel-collapse collapse">
        <div class="panel-body">
          <h5>Text For Category Three</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum facilisis magna, nec mattis ante gravida ac. Integer et est non tortor ultricies feugiat. Nam aliquam eros sit amet diam dictum tristique. Integer sodales tellus ut feugiat
            ornare. Suspendisse augue tellus, laoreet at mauris eu, placerat consequat urna. Aliquam porttitor quis justo sed tincidunt. Cras congue leo luctus efficitur tempor. Etiam fringilla elementum augue, et semper est dignissim ut. Maecenas massa
            dui, efficitur id mi eget, dignissim cursus enim.</p>
        </div>
      </div>
    </div>
    <!-End of Panel for Category 3->

  </div>
  <!-End of Information Panel Group->
</div>

如果您愿意，这里是 codepen 链接：

https://codepen.io/jgolding94/pen/LYZoZrW

标签： htmlcsstwitter-bootstrapbootstrap-4