Bootstrap Accordian - После значков - PullRequest
Новая
       82

Bootstrap Accordian - После значков

0 голосов
/ 28 декабря 2018

Я пытаюсь заставить значки "после" отображаться правильно.Когда вы запускаете код в первый раз, значки указывают вниз, а не вправо.

Только когда вы действительно откроете и закроете панель, они отобразятся правильно.

Я получаютот же эффект с моим кодом на веб-сайте, над которым я работаю.Есть идеи?

Пример кода ссылки

1 Ответ

0 голосов
/ 28 декабря 2018

Итак, проблема здесь в двух вещах.

1.) Ваши значки транспонированы для их состояний, поэтому начальная точка направлена ​​вниз.

2.) Это то, что вызывает номер один, поскольку класс collapsed не делаетt существует в элементе при первом запуске, условие не выполняется при первом запуске.Однако логическое значение, которое вызывает поведение, также добавляется к атрибуту 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>
...