Question

我正在尝试创建一个默认折叠的可折叠 div，在里面我显示字体很棒的箭头“>”（因为答案已折叠），然后如果我单击，我将显示该 div，而我的" > " 应该换成 " v "（因为会显示答案）

但它不能正常工作：

.card .card-header[data-toggle="collapse"] {
  text-decoration: none;
  position: relative;
  padding: 0.75rem 3.25rem 0.75rem 1.25rem;
}
.card .card-header[data-toggle="collapse"]::after {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 1.725rem;
  line-height: 51px;
  font-weight: 900;
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  color: #d1d3e2;
}
.card .card-header[data-toggle="collapse"].collapsed {
  border-radius: 0.35rem;
}

.card .card-header[data-toggle="collapse"].collapsed::after {
  content: '\f105';
}

<div class="card shadow mb-4">  <!-- Card Header - Accordion -->
  
  <a href="#collapseQuestionCard_1" class="d-block card-header py-3" 
      data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseQuestionCard_1">
    <h6 class="m-0 font-weight-bold text-primary">Question .... ?</h6>
  </a>
  <!-- Card Content - Collapse -->
  <div class="collapse" id="collapseQuestionCard_1">
    <div class="card-body">
       Answer...
    </div>
  </div>
</div>

你有什么想法吗？

用于切换折叠的 CSS

0 个答案: