问引导4手风琴不要滚动顶部
EN

Stack Overflow用户

提问于 2019-10-10 06:52:37

回答 1查看 119关注 0票数 2

我写了一个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手风琴结合使用时，脚本工作得很好。我找不到出什么问题了..。

bootstrap-4

javascript

jquery

回答 1

Stack Overflow用户

发布于 2019-10-10 09:11:58

事件是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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58317060

复制

相似问题

问引导4手风琴不要滚动顶部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4手风琴不要滚动顶部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4手风琴不要滚动顶部
EN