我正在尝试使用最新的 jQuery 3.6.1 和 Bootstrap 5.2.3 构建可重用的下拉菜单，但事实证明这很困难。
我需要使用所单击的按钮上指定的数据属性的值动态更新下拉列表的链接。
我正在看优秀的solution由roko-c-buljan提供但它使用的是 vanilla js，我需要 jQuery。 下面是我的代码，通过单击操作按钮“...”，我收到错误:
{
"message": "Uncaught TypeError: Cannot read properties of null (reading 'classList')",
"filename": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js",
"lineno": 6,
"colno": 44054
}
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-primary" data-type="ddbtn" data-id="1" data-value="some value 1" data-bs-toggle="dropdown" aria-expanded="false" >...</button>
</div>
</td>
</tr>
<tr>
<td>item 2</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-primary" data-type="ddbtn" data-id="2" data-value="some value 2" data-bs-toggle="dropdown" aria-expanded="false" >...</button>
</div>
</td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu">
<li><a href="#" tabindex="-1" class="dropdown-item" id="link1">Action 1</a></li>
<li><a href="#" tabindex="-1" class="dropdown-item" id="link2">Action 2</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha512-i9cEfJwUwViEPFKdC1enz4ZRGBj8YQo6QByFTF92YXHi7waCqyexvRD75S5NVTsSiTv7rKWqG9Y5eFxmRsOn0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function () {
$dropdown = $("#contextMenu"); // let's get the dropdown menu
$("button[data-type='ddbtn']").click(function () {
var id = $(this).data("id");
console.log(id);
$("#link1").attr("href","/action/dosomething?id=" + id);
$("#link1").text($(this).data("value")); // just for test purposes.
$("#link2").attr("href","/action/somethingelse?id=" + id);
$(this).dropdown();
});
});
</script>
</body>
</html>最佳答案
试试这个
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha512-i9cEfJwUwViEPFKdC1enz4ZRGBj8YQo6QByFTF92YXHi7waCqyexvRD75S5NVTsSiTv7rKWqG9Y5eFxmRsOn0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-primary" data-type="ddbtn" data-id="1" data-value="some value 1" data-bs-toggle="dropdown" aria-expanded="false" >...</button>
</div>
</td>
</tr>
<tr>
<td>item 2</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-primary" data-type="ddbtn" data-id="2" data-value="some value 2" data-bs-toggle="dropdown" aria-expanded="false" >...</button>
</div>
</td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu">
<li><a href="#" tabindex="-1" class="dropdown-item link1">Action 1</a></li>
<li><a href="#" tabindex="-1" class="dropdown-item link2">Action 2</a></li>
</ul>
<script>
$(function () {
var $dropdown = $("#contextMenu");
$("button[data-type='ddbtn']").each(function(){
var id = $(this).data("id");
var $menu = $dropdown.clone();
$menu.find(".link1").attr("href","/action/dosomething?id=" + id);
$menu.find(".link1").text($(this).data("value"));
$menu.find(".link2").attr("href","/action/somethingelse?id=" + id);
$(this).after($menu);
});
});
</script>
</body>
</html>关于jquery - 使用 jQuery 和 Bootstrap 可重复使用的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74719066/