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

标签 html css bootstrap-4

我已经自定义了一个 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>

最佳答案

试试这个:

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

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

代码片段在这里

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

只是 fiddle

See code on Just Fiddle

关于html - Bootstrap 4 自定义列表组折叠插入符号功能不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49633844/

上一篇：r - 图例 ggplot 图不显示均值、误差线和彩色矩形

下一篇：documentation - 需要更改端口以在 Compodoc 中打开文档

相关文章：

css - Bootstrap 4 卡 : remove blank space

javascript - 使用 JavaScript 通过一次选择输入添加 TR+TD 内容

javascript - 当我运行 window.onload 函数时，我得到意外的 token 非法

html - 在元素中使用很棒的字体时无法更改字体系列

javascript - 为后端出列/取消注册 css 和 js

css - Bootstrap css 将图像作为覆盖在标题中

javascript - 如何通过点击img来增加box-shadow？

css - 如何仅使用 CSS 淡化 div 的边缘？

javascript - AngularJS activetab - 有多个事件链接

html - 固定导航菜单和移动响应

©2024 IT工具网  联系我们