如何使bootstrap 5下拉菜单在达到某个断点时停用或重新使用

Question

我在下面写了一个简单的调整大小函数，但我不知道如何开始，我相信bootstrap 5的js函数会有这个选项，但我找不到它。

我想把这个下拉作为一个正常的dom操作，而不是在较小的断点处的下拉组件。这就是为什么我需要禁用下拉菜单功能。

<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

你只需要添加disabled类到按钮

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

我希望你能用这个片段