How to make bootstrap 5 dropdown deactivate or use again when a certain breakpoint is reached

Question

I wrote a simple resize function below but I don't know how to start, I believe bootstrap 5's js function will have this option but I can't find it.

I would like to treat this dropdown as a normal dom operation instead of dropdown components at smaller breakpoints. Thats why i need to disable the dropdown functions.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

  function resizeFunction() {
    if ($(window).width() <= 992) {
      // disable dropdown function
    } else {
      // enable dropdown function
    }
  }

Answer 1

you just need to add disabled class to button

function resizeFunction() {
  if ($(window).width() <= 992) {
    // disable dropdown function
    $("#dropdownMenuButton1").addClass("disabled");
  } else {
    // enable dropdown function
    $("#dropdownMenuButton1").removeClass("disabled");
  }
}

I hope you will clear with this snippet