Как правильно использовать коллапс

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne">
        <i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i>
        <font data-toggle="collapse" data-target="#collapseOne">Header</font>
      </div>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo">
        <i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i>
        <font data-toggle="collapse" data-target="#collapseTwo">Detail</font>
      </div>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
        <font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font>
      </div>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
        <font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font>
      </div>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br />
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
        <font data-toggle="collapse" data-target="#collapseThree">Tesco</font>
      </div>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
</div>

Код, скопированный по ссылке: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion

Я просто изменил кнопку на шрифт

Моя проблема:

Код должен быть переключен, но я нажимаю еще 1 раз, чтобы закрыть тело карты (не работает). Только нажмите другой развал, затем его закрыть.

Как это решить.

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что <font> имеет встроенное значение атрибута display CSS по умолчанию, я бы посоветовал не использовать его, так как устарел , чтобы исправить проблему, которую я заменил <font> тег с <div>

Примечание : я также исправил атрибут collapse для некоторых элементов аккордеона и переместил встроенные CSS в CSS классы.

.card-header-title {
border-radius:0px;
cursor:pointer;
}
.pe-7s-angle-up-circle {
  color:#3d68e0;
  font-size:16px
}
font {
  display: block
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" id="headingOne">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseOne"></i>
        <div data-toggle="collapse" data-target="#collapseOne">Header</div>
      </div>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" id="headingTwo">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseTwo"></i>
        <div data-toggle="collapse" data-target="#collapseTwo">Detail</div>
      </div>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" id="headingThree">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
        <div data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</div>
      </div>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" id="headingFour">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
        <div data-toggle="collapse" data-target="#collapseFour">Debtor Price Detail</div>
      </div>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
  <br />
  <div class="card">
    <div class="card-header">
      <div class="card-header-title" id="headingFive">
        <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
        <div data-toggle="collapse" data-target="#collapseFive">Tesco</div>
      </div>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
      <div class="card-body">
        &nbsp;123
      </div>
    </div>
  </div>
</div>