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
}
}
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