如何移除Bootstrap手风琴组件的下拉箭头？

问题描述 #

我正在使用包含手风琴（accordion）菜单的Bootstrap模板，页面某部分不需要手风琴展开显示额外内容，因此想要移除下拉箭头。我尝试过多种方法但均未成功，推测箭头由accordion-button类控制，请问该如何操作？

现有HTML代码：

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                #1 高压清洗（可配合或不配合表面活性剂）
            </button>
        </h2>
    </div>
</div>

现有CSS代码：

.accordion-flush .accordion-item .accordion-button {
    background-color: #FED005!important;
    color: #25327B ;
}

.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
    background-color: #5500C9 !important;
    color:#FFF !important;
    text-decoration: none !important;
    border: hidden !important;
    border-color: #FFF !important;
    box-shadow: 0px !important;  
}

.accordion-button:focus {
    z-index: 3;
    border-color: #FFF !important;
    outline: 0;
    box-shadow: none !important;
}

.accordion-button:focus {
    border-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.accordion-button:hover, .accordion-button:active {
    color: #25327B !important;
    font-weight: bold;
}

解决方案 #

Bootstrap的手风琴下拉箭头是通过accordion-button的伪元素::after渲染的，直接隐藏这个伪元素就能移除箭头。在现有CSS中添加以下规则即可：

全局移除所有手风琴箭头

.accordion-button::after {
    display: none !important;
}

仅针对当前手风琴移除箭头（更精准）

如果你只想去掉#accordionFlushExample这个手风琴的箭头，用更具体的选择器：

#accordionFlushExample .accordion-button::after {
    display: none !important;
}

额外优化（可选） #

既然不需要展开功能，建议同时修改HTML，移除按钮的展开触发属性，避免不必要的交互：

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="flush-collapseThree">
                #1 高压清洗（可配合或不配合表面活性剂）
            </button>
        </h2>
    </div>
</div>

（注：移除了data-bs-target属性，按钮将不再触发展开动作）

内容的提问来源于stack exchange，提问作者Nick Janssen