Bootstrap 手风琴 - 在图标之后

Question

我正在尝试让 "after" 图标正确显示。当您第一次运行代码时，图标指向下方而不是右侧。

直到你真正打开和关闭一个面板，它们才会正确显示。

我在我正在使用的网站上使用我的代码获得了同样的效果。有什么想法吗？

Answer 1

所以这里的问题有两点。

1.) 您的图标已根据其状态进行了调换，因此开始指向下方。

2.) 这就是导致第一个原因的原因，因为 collapsed class 在第一个运行的元素上不存在，条件不满足首先运行。但是，导致该行为的布尔值也附加到 aria 属性。因此，如果我们使用它来翻转条件而不是折叠 class，它应该始终与视觉上实际发生的情况保持一致。

留给我们一个简单的解决方法，如下所示。希望对你有帮助，干杯！ ;

（哦，还有 PS，如果你想让你的箭头动起来，只需取消注释几行额外的 css 并注释掉第二个 content 图标。:)

/* Icon when the collapsible content is shown */
  a:before {
    font-family: "Glyphicons Halflings";
    content: "\e080";
    float: right;
    margin-left: 15px;
    /*transition: .25s ease;*/
  }
  /* Icon when the collapsible content is hidden */
  a[aria-expanded=true]:before {
    content: "\e114"; /* comment this out and uncomment the transition above and transforms below to animate */
    /*transform: rotate(90deg);
    -webkit-transform: rotate(90deg);*/
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Collapse</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

Bootstrap 手风琴 - 在图标之后

Bootstrap Accordian - After icons

css

accordion

collapse

media-queries

twitter-bootstrap