我已经看到了一些关于此的链接（以及 StackOverflow 中的问题/答案），但我似乎无法让它发挥作用。 我有一个在 boostrap 中创建的手风琴，我希望可以使用页面上其他位置的链接将用户移动到手风琴，然后打开特定的手风琴项目（如果尚未打开）。
我的手风琴代码是：
<div id="accordionMessaging" class="accordion" role="tablist">
<div id="csMessageItem" class="accordion-item">
<h2 class="accordion-header" role="tab"><button id="composingmessages" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-1" aria-expanded="true" aria-controls="accordionMessaging .item-1">Composing and Sending Messages</button></h2>
<div id="csMessageContent" class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Easily draft and send messages to your audience, no matter the size. Keep everyone in the loop with just a few clicks! With group targeting and the ability to send messages to specific users, you have maximum flexibility for personalized communication. You can also schedule messages for later or reuse past messages with ease.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button id="publicfollowers" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-2" aria-expanded="false" aria-controls="accordionMessaging .item-2">Unlimited "Public" Followers</button></h2>
<div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Grow your community without limits! jojo lets anyone follow your public channel, giving you a broader reach. Many plans also allow you to create specific groups of unlimited size for targeted engagement. Plus, your public messages can be shared by jojo users across social media, email, and SMS—amplifying your reach even further.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 id="aihelper" class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-3" aria-expanded="false" aria-controls="accordionMessaging .item-3">Groups and Custom Communications</button></h2>
<div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Want to reach specific teams or users? Organize them into groups and send targeted communications for a personal touch. Import entire rosters at once or add jojo users individually to create and populate your groups efficiently.</p>
</div>
</div>
</div>
</div>
我的链接是：
<a href="#csMessageitem" data-toggle="collapse" data-parent="#accordionMessaging">Compose & Send Messages</a>
如果我删除
data-toggledata-parent我也尝试过：
<a href="#csMessageitem" data-bs-target="#accordtionMessging .item-1" data-bs-toggle="collapse">Unlimited "Public" followers</a>
我正在使用boostrap 5.3
我确实看到了一些使用 JS 的建议，但我不知道如何编写 JS。
您可以收集列表中的所有锚点，然后监听哈希值更改，如果哈希值与列表中的某个锚点匹配，则手动单击该锚点元素中的切换按钮：
// get all anchors
const links = [...document.querySelectorAll('#accordionMessaging .accordion-item')].map(el=>el.getAttribute('id') ? '#'+el.getAttribute('id') : null);
// initial check
toggler(location.hash);
// accordion toggler
function toggler(itemId) {
if(links.includes(itemId)) {
document.querySelector(`#accordionMessaging ${itemId} [data-bs-target]`).click();
}
}
// open accordion on hash change
addEventListener('hashchange', (event) => {
if(links.includes(location.hash)) {
toggler(location.hash);
}
});
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
<div class="d-flex flex-column" style="margin-bottom:15rem;">
<a href="#csMessageItem">accordion 1</a>
<a href="#csMessageItem2">accordion 2</a>
<a href="#csMessageItem3">accordion 3</a>
</div>
<div id="accordionMessaging" class="accordion" role="tablist">
<div id="csMessageItem" class="accordion-item">
<h2 class="accordion-header" role="tab"><button id="composingmessages" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-1" aria-expanded="true" aria-controls="accordionMessaging .item-1">Composing and Sending Messages</button></h2>
<div id="csMessageContent" class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Easily draft and send messages to your audience, no matter the size. Keep everyone in the loop with just a few clicks! With group targeting and the ability to send messages to specific users, you have maximum flexibility for personalized communication. You can also schedule messages for later or reuse past messages with ease.</p>
</div>
</div>
</div>
<div id="csMessageItem2" class="accordion-item">
<h2 class="accordion-header" role="tab"><button id="publicfollowers" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-2" aria-expanded="false" aria-controls="accordionMessaging .item-2">Unlimited "Public" Followers</button></h2>
<div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Grow your community without limits! jojo lets anyone follow your public channel, giving you a broader reach. Many plans also allow you to create specific groups of unlimited size for targeted engagement. Plus, your public messages can be shared by jojo users across social media, email, and SMS—amplifying your reach even further.</p>
</div>
</div>
</div>
<div id="csMessageItem3" class="accordion-item">
<h2 id="aihelper" class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-3" aria-expanded="false" aria-controls="accordionMessaging .item-3">Groups and Custom Communications</button></h2>
<div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordionMessaging">
<div class="accordion-body">
<p class="mb-0">Want to reach specific teams or users? Organize them into groups and send targeted communications for a personal touch. Import entire rosters at once or add jojo users individually to create and populate your groups efficiently.</p>
</div>
</div>
</div>
</div>
<script>
// get all anchors
const links = [...document.querySelectorAll('#accordionMessaging .accordion-item')].map(el=>el.getAttribute('id') ? '#'+el.getAttribute('id') : null);
// initial check
toggler(location.hash);
function toggler(itemId) {
if(links.includes(itemId)) {
document.querySelector(`#accordionMessaging ${itemId} [data-bs-target]`).click();
}
}
// open accordion on hash change
addEventListener('hashchange', (event) => {
if(links.includes(location.hash)) {
toggler(location.hash);
}
});
</script>
</body>
</html>