Bootstrap 4 Accordion не прокручивается сверху

Question

Я написал Javascript, который позволяет прокручивать гармошку, когда пользователь нажимает на нее, чтобы открыть. Ниже вы можете найти пример Bootstrap 4 аккордеона и Javascript:

$('.card').on('shown.bs.collapse', function(e) {
    var $card = $(this).closest('.card');
    setTimeout(function(){
    $('html,body').animate({
      scrollTop: $card.offset().top
    }, 500); //animation speed
  }, 500); //execution timeout
  });

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



<div class="container accordion p-0" id="accordionKompakt">
  <div class="card border-0" id="Kompakt1">
    <div class="card-header border-bottom-0 p-0 m-0" id="headingKompakt1">
      <button class="btn btn-link btn-block collapsed text-left m-0 pt-2 pb-2" type="button" data-toggle="collapse" data-target="#collapseKompakt1" aria-expanded="false" aria-controls="collapseKompakt1">
        <table class="m-0 p-0" width="100%">
          <tr>
            <td width="95%">
              <p class="m-1">
                <b class="text-dark">Erlangung der Gehfähigkeit bei nicht gehfähigen Patienten</b>
                <br>
                <small class="text-secondary nrow-flag">5 Empfehlungen</small>
              </p>
            </td>
            <td class="align-middle" width="5%">
              <span class="fa collapse-indicator text-right text-secondary"></span>
            </td>
          </tr>
        </table>
        <div class="arrow-up m-0 p-0"></div>
      </button>
    </div>
  </div>
  <div class="collapse border-top bg-light" id="collapseKompakt1" aria-labelledby="headingKompakt1" data-parent="#accordionKompakt">
    <div class="card-body m-0 p-2">
      <div class="kompakt-box p-0 m-0">
        <table class="p-1 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Subakute Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining, falls verfügbar und realisierbar unter Einschluss des Gangtrainers</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining unter Einschlussdes Laufbands oder des Lokomaten</p>
              <p class="m-0 pb-1 pt-1">&#8226; Zyklische Mehrkanalstimulation zur Erzeugung gehähnlicher Beinbewegungen des paretischen Beines im Liegen</p>
              <p class="m-0 pb-1 pt-1">&#8226; Zusätzliche Elektroakupunktur</p>
              <p class="m-0 pb-1 pt-1">&#8226; <u>Für Patienten mit Neglect:</u> Spezifisches Neglect-Training</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">

            </td>
          </tr>
        </table>
        <table class="p-1 mt-2 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Chronische Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1">Keine Einträge</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>


  <div class="card border-0" id="Kompakt2">
    <div class="card-header border-top border-bottom-0 p-0 m-0" id="headingKompakt2">
      <button class="btn btn-link btn-block collapsed text-left m-0 pt-2 pb-2" type="button" data-toggle="collapse" data-target="#collapseKompakt2" aria-expanded="false" aria-controls="collapseKompakt2">
        <table class="m-0 p-0" width="100%">
          <tr>
            <td width="95%">
              <p class="m-1">
                <b class="text-dark">Verbesserung der Gehfähigkeit bei (eingeschränkt) gehfähigen Patienten</b>
                <br>
                <small class="text-secondary">8 Empfehlungen</small>
              </p>
            </td>
            <td class="align-middle" width="5%">
              <span class="fa collapse-indicator text-right text-secondary"></span>
            </td>
          </tr>
        </table>
        <div class="arrow-up m-0 p-0"></div>
      </button>
    </div>
  </div>
  <div class="collapse border-top bg-light" id="collapseKompakt2" aria-labelledby="headingKompakt2" data-parent="#accordionKompakt">
    <div class="card-body m-0 p-2">
      <div class="kompakt-box p-0 m-0">
        <table class="p-1 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Subakute Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining: konventionell oder unter Einschluss des Laufbands (möglichst progressiv) </p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Aufgabenbezogenes Training mit Bewegungsvorstellung und</p>
              <p class="m-0 pb-1 pt-1">&#8226; Nutzung von Gehhilfen</p>
              <p class="m-0 pb-1 pt-1">&#8226; Kombinationstherapie aus Gangtrainer mit funktioneller Elektrostimulation</p>
              <p class="m-0 pb-1 pt-1">&#8226; Nadelakupunktur inklusive Elektroakupunktur während intensiver Rehabilitation</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">

            </td>
          </tr>
        </table>
        <table class="p-1 mt-2 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Chronische Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Für Patienten mit spastischer Equinovarus-Deformität: Injektion von Botulinumtoxin zur Reduktion des Hilfsmittelgebrauchs</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Unterstützung eines Laufbandtrainings mit VR</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">
              <p class="m-0 pb-1 pt-1">&#8226; Für Patienten mit spastischer Equinovarus-Deformität: Thermokoagulation des N. tibialis</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

</div>


<br><br><br>

Может кто-нибудь помочь? Сценарий хорошо работает, когда я использую его в сочетании с другими Bootstrap 4 аккордеонами с такой же структурой на других страницах. Я не мог найти, что здесь не так ...

Answer 1

Событие show.bs.collapse, и вы должны слушать основной аккордеонный элемент #accordionKompakt. Чтобы получить карту, по которой щелкнули, используйте $(e.target).prev('.card');

$('#accordionKompakt').on('show.bs.collapse', function(e) {
    var $card = $(e.target).prev('.card');
    setTimeout(function(){
    $('html,body').animate({
      scrollTop: $card.offset().top
    }, 500); //animation speed
  }, 500); //execution timeout
});

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



<div class="container accordion p-0" id="accordionKompakt">
  <div class="card border-0" id="Kompakt1">
    <div class="card-header border-bottom-0 p-0 m-0" id="headingKompakt1">
      <button class="btn btn-link btn-block collapsed text-left m-0 pt-2 pb-2" type="button" data-toggle="collapse" data-target="#collapseKompakt1" aria-expanded="false" aria-controls="collapseKompakt1">
        <table class="m-0 p-0" width="100%">
          <tr>
            <td width="95%">
              <p class="m-1">
                <b class="text-dark">Erlangung der Gehfähigkeit bei nicht gehfähigen Patienten</b>
                <br>
                <small class="text-secondary nrow-flag">5 Empfehlungen</small>
              </p>
            </td>
            <td class="align-middle" width="5%">
              <span class="fa collapse-indicator text-right text-secondary"></span>
            </td>
          </tr>
        </table>
        <div class="arrow-up m-0 p-0"></div>
      </button>
    </div>
  </div>
  <div class="collapse border-top bg-light" id="collapseKompakt1" aria-labelledby="headingKompakt1" data-parent="#accordionKompakt">
    <div class="card-body m-0 p-2">
      <div class="kompakt-box p-0 m-0">
        <table class="p-1 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Subakute Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining, falls verfügbar und realisierbar unter Einschluss des Gangtrainers</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining unter Einschlussdes Laufbands oder des Lokomaten</p>
              <p class="m-0 pb-1 pt-1">&#8226; Zyklische Mehrkanalstimulation zur Erzeugung gehähnlicher Beinbewegungen des paretischen Beines im Liegen</p>
              <p class="m-0 pb-1 pt-1">&#8226; Zusätzliche Elektroakupunktur</p>
              <p class="m-0 pb-1 pt-1">&#8226; <u>Für Patienten mit Neglect:</u> Spezifisches Neglect-Training</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">

            </td>
          </tr>
        </table>
        <table class="p-1 mt-2 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Chronische Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1">Keine Einträge</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>


  <div class="card border-0" id="Kompakt2">
    <div class="card-header border-top border-bottom-0 p-0 m-0" id="headingKompakt2">
      <button class="btn btn-link btn-block collapsed text-left m-0 pt-2 pb-2" type="button" data-toggle="collapse" data-target="#collapseKompakt2" aria-expanded="false" aria-controls="collapseKompakt2">
        <table class="m-0 p-0" width="100%">
          <tr>
            <td width="95%">
              <p class="m-1">
                <b class="text-dark">Verbesserung der Gehfähigkeit bei (eingeschränkt) gehfähigen Patienten</b>
                <br>
                <small class="text-secondary">8 Empfehlungen</small>
              </p>
            </td>
            <td class="align-middle" width="5%">
              <span class="fa collapse-indicator text-right text-secondary"></span>
            </td>
          </tr>
        </table>
        <div class="arrow-up m-0 p-0"></div>
      </button>
    </div>
  </div>
  <div class="collapse border-top bg-light" id="collapseKompakt2" aria-labelledby="headingKompakt2" data-parent="#accordionKompakt">
    <div class="card-body m-0 p-2">
      <div class="kompakt-box p-0 m-0">
        <table class="p-1 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Subakute Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Intensives Gehtraining: konventionell oder unter Einschluss des Laufbands (möglichst progressiv) </p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Aufgabenbezogenes Training mit Bewegungsvorstellung und</p>
              <p class="m-0 pb-1 pt-1">&#8226; Nutzung von Gehhilfen</p>
              <p class="m-0 pb-1 pt-1">&#8226; Kombinationstherapie aus Gangtrainer mit funktioneller Elektrostimulation</p>
              <p class="m-0 pb-1 pt-1">&#8226; Nadelakupunktur inklusive Elektroakupunktur während intensiver Rehabilitation</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">

            </td>
          </tr>
        </table>
        <table class="p-1 mt-2 bg-white" width="100%">
          <tr>
            <td class="border p-1 pl-2 pr-2" colspan="2">
              <p class="m-0 pb-1 pt-1"><b>Chronische Phase</b></p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">A (soll)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">

            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">B (sollte)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
                <p class="m-0 pb-1 pt-1">&#8226; Für Patienten mit spastischer Equinovarus-Deformität: Injektion von Botulinumtoxin zur Reduktion des Hilfsmittelgebrauchs</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">0 (kann)</p>
            </td>
            <td class="border align-top p-1 pl-2 pr-2">
              <p class="m-0 pb-1 pt-1">&#8226; Unterstützung eines Laufbandtrainings mit VR</p>
            </td>
          </tr>
          <tr>
            <td class="border align-top p-1 pl-2 pr-2" width="100">
              <p class="m-0 pb-1 pt-1">-B (sollte nicht)</p>
            </td>
            <td class="border p-1">
              <p class="m-0 pb-1 pt-1">&#8226; Für Patienten mit spastischer Equinovarus-Deformität: Thermokoagulation des N. tibialis</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

</div>


<br><br><br>