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

请改为尝试：

初始状态指向下方; 修改您的主页 /指向添加类折叠的链接。

<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>

点击后点; 添加到您的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;
}

再次点击指向其初始状态; 添加到您的CSS代码：

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

删除CSS代码：

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

Snippet Here

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  border: solid #222;
  border-width: 0 1px 1px 0;
  display: inline;
  cursor: pointer;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item a.btn.collapsed span {
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transition: .3s transform ease-in-out;
}

.list-group-item a.btn span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transition: .3s transform ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <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 collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
            Link with href<span class="mr-3"></span>
            </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 collapsed" 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 collapsed" 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>


</body>

</html>

Just Fiddle

See code on Just Fiddle

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

1 个答案:

Snippet Here

Just Fiddle