活动时 Bootstrap 手风琴 CSS 样式

编程问答 2022-05-22

问题描述

我试图让我的手风琴按钮在显示时保持紫色背景颜色并在关闭时返回白色，并在点击后删除蓝色高亮边框。我正在使用 boostrap v5。这是我尝试过的 CSS，它实现了下图中的结果：

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

<div class="accordion-item ">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button collapsed mb-3 border-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#collapSEOne" aria-expanded="false" aria-controls="collapSEOne"> How to sell my motorbike? </button>
            </h2>
            <div id="collapSEOne" class="accordion-collapse collapse border mb-3 bg-dark text-white" aria-labelledby="headingOne" data-bs-parent="#motorbikeAccordion">
              <div class="accordion-body"> <strong>How do I sell my motorbike to you?</strong> Selling your motorbike to us is easy. We operate three simple steps. Enter your motorbike's registration in the Box above and confirm we've found the right bike. After that we will ask for some details about your motorbike such as the mileage,condition and accessories. Once we've received your contact details we will be in touch within just 24 hours. </div>
            </div>
          </div>

1：折叠状态：

Collapsed

2：悬停状态：

enter image description here

3：显示状态：

enter image description here

4：移开焦点时的最终状态（点击离开）

enter image description here

bootstrap 官方文档中关于手风琴的信息极其有限。

问题：我想删除显示状态 (3) 上的边框，以及当手风琴打开且用户单击离开时的最终状态上的边框，以便保留背景紫色，直到手风琴关闭，然后变回白色。

解决方法

在 bootstrap CSS 中挖掘之后，我找到了使用的类：

.accordion-button:not(.collapsed) {
  color: #FFF  !important;
  background-color: #5500C9 !important;
}



.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: 0 0 0 .25rem #FFF !important;
}

奖励内容：

    .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(180deg)

}

这是要改为向上/向下箭头svg

accordiontwitter-bootstrap