带有一个选项卡的手风琴始终展开。引导程序 5

问题描述 投票：0回答：3

我有一个用 bootstrap 5 制作的手风琴。我怎样才能使手风琴始终展开一个选项卡？换句话说，我不希望选项卡全部关闭，我希望其中一个选项卡始终打开。我怎样才能用普通的 javascript 做到这一点？

<div class="accordion" id="accordionExample">
                <div class="accordion-item">
                  <h1 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">
                      ...
                    </button>
                  </h1>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      
...
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h1 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"
                    >
                      ...
                    </button>
                  </h1>
                  <div
                    id="collapseTwo"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingTwo"
                    data-bs-parent="#accordionExample"
                  >
                    <div class="accordion-body">
                      ...
                    </div>
                  </div>
                </div>

我不希望这种事发生......

enter image description here

javascript html css accordion
3个回答
4
投票

我为同样的问题苦苦挣扎了一段时间，终于能够为其编写解决方案。我不是 js 大师，所以它可能不是最优雅的解决方案，但它有效：

<script>
    const accordions = document.querySelectorAll(".accordion-collapse");
    let opening = false;
    accordions.forEach(function (el) {
      el.addEventListener("hide.bs.collapse", (event) => {
        if (!opening) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          opening = false;
        }
      });
      el.addEventListener("show.bs.collapse", (event) => {
        opening = true;
      });
    });
</script>

有点晚了，但对其他人也可能有用

0
投票

您似乎想要实现引导手风琴的设计和布局风格，但不需要它的功能。实现此目的的最佳方法是编写静态 html/css，而不是使用引导组件，这是出于不同的原因。

根据你的问题，你正在尝试做类似的事情：

enter image description here

这是使用引导程序进行硬编码的，因此它将永远“打开”。使用向下 V 形的 png 或使用 fontawesome 中的 this。为了快速起见，我刚刚链接到了来自谷歌的外部来源的图像。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="acordionThing" style="margin:5rem"> <div class="col d-flex" style="background-color: rgb(185, 185, 185); "> <div class="col"> <p style=" margin:1rem"> Somekind of a text here. </p> </div> <div style="width:2rem; float:right; margin-right: 2rem;"> <img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;""> </div> </div> <div class="col d-flex" style="background-color: rgb(218, 218, 218);"> <div class="col"> <p style=" margin:1rem"> Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. </p> </div> </div> </div> <div class="acordionThing" style="margin:5rem"> <div class="col d-flex" style="background-color: rgb(185, 185, 185); "> <div class="col"> <p style=" margin:1rem"> Somekind of a text here. </p> </div> <div style="width:2rem; float:right; margin-right: 2rem;"> <img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;""> </div> </div> <div class="col d-flex" style="background-color: rgb(218, 218, 218);"> <div class="col"> <p style=" margin:1rem"> Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here. </p> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html> 




    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


$('.collapse').on('hidden.bs.collapse', function () {
  $('.collapse').eq(0).collapse('show');
});


    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.