Bootstrap 4 自定义列表组折叠插入符号功能不正确

Question

我已经自定义了一个 Bootstrap 4 列表组，以包含折叠功能。

我已经包含了一个 css 插入符号箭头，所以用例应该是： 1. 初始状态指向下 2. 单击时指向上 3. 再次单击指向回其初始状态

我的问题是，在第一次点击时，插入符号不会做任何事情，只有在第二次点击时它才会指向上。

我正在使用 css 变换选择器来向上/向下旋转插入符号。

为什么这不能正常工作，我是否遗漏了什么/做错了什么？

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  cursor: pointer;
  border: solid #222;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg);
  transition: .3s transform ease-in-out;
  display: inline;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item .collapsed span {
  transform: rotate(-140deg);
  margin-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <div class="my-5">
        <ul class="list-group list-group-flush">
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
              <span class="mr-3"></span> Link with href
            </a>
            <div class="collapse" id="collapseExample1">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
            Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample2">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
    Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample3">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个：

1. 初始状态为向下；修改您的锚点/链接以添加类折叠。

   <a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">Link with href<span class="mr-3"></span></a>
   

2. 点击时指向上；添加到您的 CSS 代码：

   .list-group-item a.btn span {
     transform: rotate(-140deg);
     -webkit-transform: rotate(-140deg);
     transition: .3s transform ease-in-out;
   }
   

   修改你的 CSS 代码：

   .list-group-item span {
     cursor: pointer;
     border: solid #222;
     border-width: 0 1px 1px 0;
     transform: rotate(40deg);
     -webkit-transform: rotate(40deg);
     transition: .3s transform ease-in-out;
     display: inline;
     padding: 3px;
     position: absolute;
     right: 0;
     margin-top: 10px;
   }
   

3. 再次单击指向回其初始状态；添加到您的 CSS 代码：

   .list-group-item a.btn.collapsed span {
     transform: rotate(40deg);
     -webkit-transform: rotate(40deg);
     transition: .3s transform ease-in-out;
   }
   

4. 删除 CSS 代码：

   .list-group-item .collapsed span {
     transform: rotate(-140deg);
     -webkit-transform: rotate(-140deg);
     margin-top: 10px;
   }
   

片段在这里

<a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">Link with href<span class="mr-3"></span></a>

.list-group-item a.btn span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transition: .3s transform ease-in-out;
}

只是小提琴

查看 Just Fiddle 上的代码