Bootstrap Accordion - 在图标之后

Posted 2023-03-24

【中文标题】Bootstrap Accordion - 在图标之后

【英文标题】：Bootstrap Accordian - After icons

【发布时间】：2019-05-25 20:09:42

【问题描述】：

我正在尝试让“之后”图标正确显示。首次运行代码时，图标指向下方而不是右侧。

直到您真正打开和关闭面板才能正常显示。

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

Code example link

【参考方案1】：

所以这里的问题是两件事。

1.) 您的图标已根据其状态转置，因此起点向下。

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

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

（哦，还有 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>

【讨论】：

没有问题，愉快的编码:)