Bootstrap Accordian-图标后 [英] Bootstrap Accordian - After icons

问题描述

我正在尝试使之后"图标正确显示.首次运行代码时，图标指向下而不是指向右.

I'm trying to get the "after" icons to display properly. When you first run the code, the icons point down instead of to the right.

直到您真正打开和关闭面板后，它们才能正确显示.

It isn't until you actually open and close a panel do they display properly.

在我正在工作的网站上，我的代码获得了相同的效果.有什么想法吗?

I'm getting the same effect with my code on a website I'm working on. Any ideas?

代码示例链接

推荐答案

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

So the problem here is two things.

1.)您已将图标转置为其状态，因此开始指向下方.

1.) You've got your icons transposed for their states, hence the starting pointing down.

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

2.) This is what causes number one, since the collapsed class doesn't exist on the element on the first run the condition isn't met on the first run. However, the boolean that's causing the behavior is also appended to the aria attribute which is. So if we use it to flip the condition instead of the collapsed class it should always behave congruently with what's actually occurring visually.

为我们提供了一个简单的解决方法，如下所示.希望它能帮助您，加油！ ;

Leaving us with a simple workaround like below. Hope it helps, cheers! ;

(OH和PS，如果您想为箭头设置动画，只需取消注释几行其他CSS并注释掉第二个content图标即可.:)

(OH, and PS, if you'd like to animate your arrow just uncomment the few lines of additional css and comment out the second content icon. :)

/* 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 Accordian-图标后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！