如何通过JavaScript切换Bootstrap 5 accordion 组件？

s3fp2yjn 于 2023-06-27 发布在 Bootstrap

关注(0)|答案(2)|浏览(129)

我正在使用Bootstrap 5中的accordion组件，并且我想从我自己的JavaScript函数（下面的示例中的toggle）中切换该组件。最好不包含jQuery。

<!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/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<button onclick="toggle(event)">Toggle Accordion Item #1</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// Toggle Accordion Item #1
function toggle(event) {
  // ???
}
</script>
</body>
</html>

从https://getbootstrap.com/docs/5.1/getting-started/introduction/和https://getbootstrap.com/docs/5.1/components/accordion/的示例中组合的代码段。

twitter-bootstrap

来源：https://stackoverflow.com/questions/69199447/how-to-toggle-bootstrap-5-accordion-component-via-javascript

2条答案

按热度按时间

prdp8dxp1#

查看collapse component的文档。

<!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/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<button onclick="toggle(event)">Toggle Accordion Item #1</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// Toggle Accordion Item #1
function toggle(event) {
  var myCollapse = document.getElementsByClassName('collapse')[0];
  var bsCollapse = new bootstrap.Collapse(myCollapse, {
    toggle: true
  });
}
</script>
</body>
</html>

赞(0）回复(0）举报 2023-06-27

gwbalxhn2#

我更新了切换功能，以切换页面上的所有 accordion 。

function toggle(event)
{
    //in my sbUCR.aspx i put a button on the nav bar to call this
    //<button class="btn btn-outline" type="button" onclick="toggle(event)" id="btoggle">▲</button>
    var myCollapse2 = document.getElementsByClassName('collapse');
    for (let i = myCollapse2.length-1; i > 0; i--) //go backwards to 1 b/c 0 is the actual navbar hamburger menu
    {
        //console.log("found" + myCollapse2[i].id);
        var bsCollapse2 = new bootstrap.Collapse(myCollapse2[i], {
            toggle: true
        });
    }
}

赞(0）回复(0）举报 2023-06-27

我来回答

如何通过JavaScript切换Bootstrap 5 accordion 组件？

2条答案

相关问题

热门标签

最新问答