Как сделать так, чтобы стрелка указывала вниз, когда карта закрыта, и вращаться при первом нажатии без jquery или javascript? - PullRequest
Новая
       10

Как сделать так, чтобы стрелка указывала вниз, когда карта закрыта, и вращаться при первом нажатии без jquery или javascript?

1 голос
/ 07 февраля 2020

У меня есть настройка, и я не могу понять, как заставить стрелку работать

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

Но как мне установить стрелку, указывающую вниз, когда карта закрыта?

https://jsfiddle.net/b7msn10u/12/

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div  class="card-header">
          <h5 class="mb-0">
            <a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse-example">
                <i class="fa fa-chevron-up pull-right"></i>
                On first click icon doesn't rotate 
            </a>
        </h5>
        </div>
        <div id="collapse1" class="collapse" aria-labelledby="heading-example">
          <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div> 
  </div>

    <div class="row mt-3">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <a data-toggle="collapse" href="#collapse2" aria-expanded="true" aria-controls="collapse-example">
                <i class="fa fa-chevron-up pull-right"></i>
                Here it does rotate on first click
            </a>
        </h5>
        </div>
        <div id="collapse2" class="collapse show" aria-labelledby="heading-example">
          <div class="card-block p-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div> 
  </div>
  <h3 class="mt-3">How to make the arrow point down when card is closed and to rotate on first click?</h3>
</div>

1 Ответ

1 голос
/ 07 февраля 2020

A свернутый элемент сложен в настройке; кроме все остальные атрибуты - могут быть переварены в эти основные атрибуты различия:

Закрыто (свернуто)

Создать пару (кнопка + элемент) " закрыто " (свернуто) вам также нужны следующие атрибуты:

КНОПКА

  • class="collapsed" вы пропустили это для класса
  • aria-expanded="false" установлено значение false , так как оно свернуто ...
  • aria-controls="collapse1" зафиксировать это на правых селекторах

ELEMENT

  • class="collapse"

И используйте стрелку, направленную вверх, но поверните на 180 ° с помощью CSS с помощью .collapsed для справки 

.card-header .fa-chevron-up {
  transition: transform 0.3s ease-in-out;
}
.card-header .collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

Открыть (без коллапса)

Чтобы сделать пару (кнопка + элемент) "открытой" (без коллапса) вам необходимо:

КНОПКА

  • class="" Нет необходимости в классе
  • aria-expanded="true" Установите в значение true

ELEMENT

  • class="collapse show"

ПРИМЕР: 

.card-header .fa-chevron-up {
  transition: transform 0.3s ease-in-out;
}
.card-header .collapsed .fa-chevron-up {
  transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<br />
<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div  class="card-header">
          <h5 class="mb-0">
            <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
              <i class="fa fa-chevron-up pull-right"></i>
              On first click icon doesn't rotate 
            </a>
          </h5>
        </div>
        <div id="collapse1" class="collapse" aria-labelledby="heading-example">
          <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div> 
  </div>

  <div class="row mt-3">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <a data-toggle="collapse" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
              <i class="fa fa-chevron-up pull-right"></i>
              Here it does rotate on first click
            </a>
          </h5>
        </div>
        <div id="collapse2" class="collapse show" aria-labelledby="heading-example">
          <div class="card-block p-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div> 
  </div>
  <h3 class="mt-3">How to make the arrow point down when card is closed and to rotate on first click?</h3>
</div>

В основном это логика c беспорядок. Не удивительно, что многие люди запутались. Но это Bootstrap. ...

...