css 设置页面加载时打开的Bootstrap 4折叠面板的颜色

mpbci0fu 于 2023-02-26 发布在 Bootstrap

关注(0)|答案(2)|浏览(251)

我想突出显示用户打开的面板，当用户点击卡片标题中的按钮时，背景设置为红色，这样做不会引起任何麻烦，如代码片段所示。
在某些情况下，我会有一个面板，通常是第一个，在页面加载时打开，我用类show设置它。我的目标是在页面加载时也将卡片标题的背景设置为红色。
card-header中的按钮使用js设置，如代码片段所示。
我想我必须使用javascript来切换类。
首先，我添加了一个新类highlight，并添加了以下CSS代码：

.accordion .card-header.highlight {
    color: #fff;
    background-color: red;
}

然后我添加了下面的js（请注意，我发现js很难理解，尽管我学得很慢，但我确实在学习），尝试设置页面加载时打开窗格标题的背景。

$(document).ready(function(){
    // Add class highlight to panel with show class
    $(".collapse.show").each(function(){
        $(this).prev(".card-header").addClass("highlight");
    });
    
    // toggle highlight class
    $(".card-header .btn").click(function(){
        $(".card-header").toggleClass("highlight");
    });
});

我看起来很乱，可能是因为它是，并没有产生预期的结果。
如何在页面加载时设置打开面板标题的背景（红色），如何使用js切换类？
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

css

来源：https://stackoverflow.com/questions/75559105/set-color-of-open-bootstrap-4-accordion-panel-on-page-loads

2条答案

按热度按时间

8zzbczxx1#

您还可以简化一点。您已经在 accordion 组件上动态添加了 Package 器。唯一缺少的是，您没有将具有show属性的组件的aria-expanded属性设置为true。为此，您可以检查show类是否存在，并动态添加值，如下所示：

function addIds(index) {
  $(this).attr("id", "accordion_" + parseInt(index + 1));
}

function addDataAttrs(index, value) {
  const num = index + 1;
  // check if any child has the show class
  // the length of the array of elements will be 
  // either 0 (falsy) or a number greater than 0 (truthy)
  // use a ternary to store a string value of "true"
  // or "false" in the variable
  const isShowing = $(value).children(".show").length ? "true" : "false";

  $(value)
    .children(".card-header")
    .attr("id", "heading_acc_" + num);
  $(value)
    .find(".card-header > .card-title")
    .wrapInner(
      `<button class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="${isShowing}"></button>`
    ); // use the variable to insert the correct value
  $(value)
    .find(".card-header > .card-title > button")
    .attr({
      "data-target": "#collapse_acc_" + num,
      "aria-controls": "collapse_acc_" + num
    });
  $(value)
    .children(".collapse")
    .attr({
      id: "collapse_acc_" + num,
      "aria-labelledby": "heading_acc_" + num
    });
}

现在不需要额外的代码来添加highlight类，因此在CSS中也不需要它。
工作示例如下：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-02-26

ohfgkhjo2#

您需要选择接收样式的按钮，并过滤打开的n.card元素。此处为.card:first-of-type
示例

/** Accordions JavaScript **/
/** Dynamically add id **/
$.each($(".accordion"), (function (index) {
   $(this).attr("id", "accordion_" + parseInt(index + 1));
}));

/** Dynamically add interaction **/
$.each($(".accordion > .card"), (function (index, value) {
   var num = index + 1;
   $(value).children(".card-header").attr("id", "heading_acc_" + num);
   $(value).find(".card-header > .card-title").wrapInner("<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
   $(value).find(".card-header > .card-title > button").attr({
      "data-target": "#collapse_acc_" + num,
      "aria-controls": "collapse_acc_" + num
   });
   $(value).children(".collapse").attr({
      id: "collapse_acc_" + num,
      "aria-labelledby": "heading_acc_" + num
   });
}));

$(document).ready(function(){
// Add class highlight to panel with show class
$(".collapse.show").each(function(){
    $(this).prev(".card-header").addClass("highlight");
});

// toggle highlight class
$(".card:first-of-type .card-header .btn").click(function(){
    $(".card-header").toggleClass("highlight");
});
});

/* ========= Accordions ==========*/
.accordion .card .card-header {
  border-bottom: 1px solid grey
}

/* Accordion Standard */
.accordion:first-child {
  margin-top: 5px;
  border-radius: 0
}

.accordion h1,
.accordion h2,
.accordion h3,
.accordion h4,
.accordion h5,
.accordion h6 {
  font-size: 1.125rem
}

.accordion .card {
  border: 0;
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0
}

.accordion .card .card-title {
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0
}

.accordion .card .card-title button {
  color: black
  font-weight: bold;
  font-size: 1.25rem;
  padding: 1.25rem;
  border: 1px solid grey
  border-radius: 0;
  background-color: #FFF;
  padding-left: 70px
}

.accordion .card .card-title button:hover,
.accordion .card .card-title button:focus {
  color: #174EA6
}

.accordion .card .card-title button::after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 1.5rem;
  left: 2rem
}

/* Open and Close Icon */
.accordion .card .card-title button[aria-expanded="true"]:after {
  content: "\f077";
  transform: rotate(0deg);
  transition: .3s all;
  color: black
}

.accordion .card .card-title button[aria-expanded="false"]:after {
  content: "\f054";
  transform: rotate(90deg);
  transition: .3s all;
  color: black
}

.accordion .card .card-header {
  padding: 0
}

.accordion .card .card-header button {
  border: 1px solid grey
  background-color: #fff;
  width: 100%;
  text-align: left
}

.accordion .card-body {
  border: 1px solid grey;
  background-color: white
}

/* Active Accordion Panel - Background and Text Color */
.accordion .card .card-header button[aria-expanded="true"] {
  background-color: red;
  color: #ffffff
}

.accordion .card:first-of-type .card-header.highlight  button {
    color: #fff;
    background-color: red;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
     <link href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
    
    <h2>Accordion: Group of 2 - First panel open</h2>

       
            <!-- Accordion headings should be changed to respect page hierarchy -->
            <!--start accordion-->
            <div class="accordion mdb-shadow-4 my-5">
               <div class="card">
                  <div class="card-header ">
                     <h2 class="card-title">
                        Accordion 1 of 2
                     </h2>
                  </div>
                  <div class="collapse show">
                     <div class="card-body">
                        <p>Loren ipsum
                        </p>
                     </div>
                  </div>
               </div>
               <div class="card">
                  <div class="card-header">
                     <h2 class="card-title">
                        Accordion 2 of 2
                     </h2>
                  </div>
                  <div class="collapse">
                     <div class="card-body">
                        <p>Insert Accordion 2 of 2 content here.</p>
                     </div>
                  </div>
               </div>
            </div>
            <!--end accordion-->

赞(0）回复(0）举报 2023-02-26

我来回答

css 设置页面加载时打开的Bootstrap 4折叠面板的颜色

2条答案

相关问题

热门标签

最新问答