Scoll從文本鏈接打開/切換Bootrap手風琴-有解無憂

我目前正在開發一個 bootstrap 手風琴，它看起來像這樣：

    <div class="support-accordion">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                    Accordion Item #4
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
        </div>
    </div>

到目前為止一切正常，默認情況下第一個手風琴展開并在我單擊其他手風琴時關閉。現在，我想知道是否有辦法滾動到并觸發這些手風琴。例如，我在頂部有一個粘性導航，內容如下：

    <div class="controls">
        <ul class="quickselect-controls">
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 1</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 2</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 3</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 4</a></li>
        </ul>
    </div>

在一個理想的世界中，我想（一旦點擊）這將自動切換特定的手風琴并滾動到它。

一些專家的幫助將不勝感激，謝謝

uj5u.com熱心網友回復：

滾動到特定卡片：鏈接href到id您要滾動到的卡片。
顯示它：添加 JS。

請參閱下面的片段。

$(document).ready(function() {
  $(".trigger-1").click(function() {
    // Show first card
    $("#headingOne button").removeClass("collapsed");
    $("#collapseOne").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingOne) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseOne)").removeClass("show");
  });

  $(".trigger-2").click(function() {
    // Show second card
    $("#headingTwo button").removeClass("collapsed");
    $("#collapseTwo").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingTwo) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseTwo)").removeClass("show");
  });

  $(".trigger-3").click(function() {
    // Show third card
    $("#headingThree button").removeClass("collapsed");
    $("#collapseThree").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingThree) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseThree)").removeClass("show");
  });

  $(".trigger-4").click(function() {
    // Show fourth card
    $("#headingFour button").removeClass("collapsed");
    $("#collapseFour").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingFour) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseFour)").removeClass("show");
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="controls">
  <ul class="quickselect-controls">
    <li><a class="trigger-1" href="#headingOne"><i class="feather-file"></i> Trigger and Scroll to Accordion 1</a></li>
    <li><a class="trigger-2" href="#headingTwo"><i class="feather-file"></i> Trigger and Scroll to Accordion 2</a></li>
    <li><a class="trigger-3" href="#headingThree"><i class="feather-file"></i> Trigger and Scroll to Accordion 3</a></li>
    <li><a class="trigger-4" href="#headingFour"><i class="feather-file"></i> Trigger and Scroll to Accordion 4</a></li>
  </ul>
</div>

<div class="support-accordion">
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
          <i class="feather-chevron-up"></i>
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
            ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
            et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
            luctus maximus venenatis.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Accordion Item #2
          <i class="feather-chevron-up"></i>
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
            ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
            et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
            luctus maximus venenatis.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Accordion Item #3
          <i class="feather-chevron-up"></i>
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
            ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
            et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
            luctus maximus venenatis.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingFour">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Accordion Item #4
          <i class="feather-chevron-up"></i>
        </button>
      </h2>
      <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
            ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
            et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
            luctus maximus venenatis.</p>
        </div>
      </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507457.html

標籤：jQuery 推特引导引导程序 5 自举手风琴

上一篇：如何在表格頂部顯示水平滾動條

下一篇：引導導航欄中的下拉問題