从 javascript 调用的 Bootstrap 5 beta 下拉问题

Question

I have a dropdown that was working in bootstrap 4, but now in bootstrap 5 (beta) it is no longer working. What I am trying to do is open a specific dropdown from a secondary button but this no longer works any more due to the changes they made in bootstrap 5. There is a fiddle to demonstrate. When you click the main button it works fine but when you click the second button it has an error, this method of just calling the dropdown show method from anywhere worked perfectly in bootstrap 4. How can I get it to work in bootstrap 5, there are mentions of a 'reference' option in the docs but all the examples in the docs are only for data-attributes, not for JS. I have tried a bunch of stuff but nothing works. Thanks.

https://jsfiddle.net/6hbcp9xm/

HTML:

  <div class="col">
    <div id="test" class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
  <div class="col">
    <button id="testbtn">
      test
    </button>
  </div>
</div>

JS:

$("#testbtn").on("click", function(){
    $("#test").dropdown("show");
})

Answer 1

The id you tried to show was wrapped around the first dropdown button. This makes it try to show the button, which is already shown so the script runs into an error.

Use toggleClass in combination with the class of the dropdown which is .dropdown-menu .

$("#testbtn").on("click", function(){
    $('.dropdown-menu').toggleClass('show')
})

https://jsfiddle.net/nzx1c04y