我试图在accordion-button中添加一个链接，并使只有箭头可单击折叠
我添加了以下CSS，使箭头只能点击。但努力使accordion-button中的链接工作。我希望用户去的位置按钮不崩溃。
.accordion-button {
pointer-events: none;
}
.accordion-button::after {
pointer-events: auto;
}这就是我所做的。我如何才能使箭头可点击，同时允许accordion-button中的href可点击，并将用户带到链接？
.accordion-button {
pointer-events: none;
}
.accordion-button::after {
pointer-events: auto;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<a href="/" class="btn btn-sm btn-link">Accordion Item #1</a>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<a href="/" class="btn btn-sm btn-link">Accordion Item #2</a>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<a href="/" class="btn btn-sm btn-link">Accordion Item #3</a>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
2条答案
按热度按时间dldeef671#
不要将锚钉嵌套在按钮内。这只是一个坏主意，是无效的HTML。Buttons和anchors有不同的用途--按钮执行操作，锚点（链接）执行导航。它们都允许根据HTML规范的内容。如果嵌套用户，会使用户感到困惑，并造成可访问性问题。
您也不需要为 accordion 式标题使用标题元素。如果你想要这样的文档结构，你可以用它们来 Package 你的链接。
请注意，所有这些都是在没有任何自定义CSS的情况下完成的。您需要熟悉Bootstrap文档，以便了解它提供了什么，而不是重复工作。
wwodge7n2#
添加此CSS：
然后将锚标记移出button标记，并将其放置在“accordion-header”div内部：