Question

我已经使用 Bootstrap 4 collapse component实现了手风琴的制作。

当我单击标题元素时，它会打开幻灯片，但移动有点卡住。

我想让它变得更流畅，我想念什么？

在这里您可以找到显示该行为的JSFiddle：

HTML

<body >        
    <div class="accordion">
        <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
            <div class="icon"></div>
            Title First Slide
        </div>
        <div class="accordion-body collapse" id="collapse_1" style="">
            This is the first slide. 
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-header" data-toggle="collapse" data-target="#collapse_2">
            <div class="icon"></div>
            Title Second Slide
        </div>
        <div class="accordion-body collapse" id="collapse_2">
            This is the second slide. 
        </div>
    </div>
</body>

CSS

.accordion .accordion-header {
  position: relative;
  padding: 1rem;
  font-size: 18px;
  font-weight: bold;
}

.accordion .accordion-header .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 40px;
  width: 40px;
  text-indent: 0 !important;
  overflow: visible !important;
}

.accordion .accordion-header .icon:after {
  /*background: #fff;*/
  border: 2px solid #f08e0d;
  border-radius: 100%;
  box-sizing: border-box;
  color: #f08e0d;
  content: "+" !important;
  text-align: center;
  font-size: 27px;
  font-weight: 400;
  opacity: 1;
  padding: 0px 10px;
}

.accordion .accordion-header[aria-expanded=true] .icon:after {
  content: "-" !important;
  padding: 0px 13px;
}

.accordion .accordion-body {
  padding: 1rem;
}

Answer 1

尝试您的代码，似乎您在.accordion-body上添加的填充会稍微影响动画，只需删除最后一条规则即可折叠手风琴即可顺利打开和关闭

.accordion .accordion-header {
  position: relative;
  padding: 1rem;
  font-size: 18px;
  font-weight: bold;
}

.accordion .accordion-header .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 40px;
  width: 40px;
  text-indent: 0 !important;
  overflow: visible !important;
}

.accordion .accordion-header .icon:after {
  /*background: #fff;*/
  border: 2px solid #f08e0d;
  border-radius: 100%;
  box-sizing: border-box;
  color: #f08e0d;
  content: "+" !important;
  text-align: center;
  font-size: 27px;
  font-weight: 400;
  opacity: 1;
  padding: 0px 10px;
}

.accordion .accordion-header[aria-expanded=true] .icon:after {
  content: "-" !important;
  padding: 0px 13px;
}

.accordion .acc-content {
  padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
      <div class="icon"></div>
      Title First Slide
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
      <div class="acc-content">
        This is the first slide.
      </div>

    </div>
  </div>
  <div class="accordion">
    <div class="accordion-header" data-toggle="collapse" data-target="#collapse_2">
      <div class="icon"></div>
      Title Second Slide
    </div>
    <div class="accordion-body collapse acc-content" id="collapse_2">
      This is the second slide.
    </div>
  </div>
</body>

Bootstrap 4手风琴-运动不流畅

1 个答案: