使用引导程序的动画手风琴

时间：2018-12-07 09:18:04

标签： jquery css bootstrap-4 

#accordion {
  .card {
    border: unset !important;
    .card-header {
      @extend .text-xx-large;
      background-color: $white;
      padding: ($spacer * 3.44) 0px ($spacer * 3.44) 0px;
    }
  }
}

.card-header {
  h5 {
   a{
      color: $dark;
      position: relative;
      display: block;
      padding-right: ($spacer * 2.5);
      font-size: ($spacer * 1.5);

      &:hover, &:focus, &:active {
        text-decoration: none;
      }

      &::before {
        content: "\f28e";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(0deg);
        transition: .35s all ease-in-out;
      }

      &.collapsed::before {
        content: "\F2C2";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(180deg);
        transition: .35s all ease-in-out;
      }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        <a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
我有以下代码使用引导程序4和超赞的图标，jquery和css。我曾尝试运行此代码，但我想要的东西没有出现。我想要
当我单击该链接时，图标没有出现在我想要的当我们看到手风琴时，将显示加号图标。之后，当我单击该链接时，它将显示减号图标。请给一些建议

2 个答案:

答案 0 :(得分：0)

您好，您刚刚更新了答案。我添加的图标是基于单击时在a标记上显示的类的。希望对您有用。

#accordion {
  .card {
    border: unset !important;
    .card-header {
      @extend .text-xx-large;
      background-color: $white;
      padding: ($spacer * 3.44) 0px ($spacer * 3.44) 0px;
    }
  }
}

.card-header {
  h5 {
   a{
      color: $dark;
      position: relative;
      display: block;
      padding-right: ($spacer * 2.5);
      font-size: ($spacer * 1.5);
      display: block;

      &:hover, &:focus, &:active {
        text-decoration: none;
      }

      &::before {
        content: "\f28e";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(0deg);
        transition: .35s all ease-in-out;
      }

      &.collapsed::before {
        content: "\F2C2";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(180deg);
        transition: .35s all ease-in-out;
      }
    }
  }
}


h5 a.btn {display: block; text-align:left;}
h5 a.btn {background: url('https://image.flaticon.com/icons/svg/25/25336.svg') no-repeat right center; background-size: 24px auto;}
h5 a.btn.collapsed{background: url('https://image.flaticon.com/icons/svg/9/9129.svg') no-repeat right center; background-size: 24px auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        <a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

我为您https://jsfiddle.net/wd87u0xL/2/添加了工作示例。

主要思想是使用FontAwesome字体系列而不是LineAwesome。另外，请修复折叠中第三项的关闭</a>标签。

您还可以简化代码，因为a::before和a.collapsed::before具有共同点：

a {
   &::before {
       content: "\f28e";
       position: absolute;
       top: 50%;
       right: 0;
       font-family: FontAwesome;
       color: $green;
       font-weight: 400;
       line-height: 24px;
       font-size: 24px;
       transition: .35s all ease-in-out;
       transform: translateY(-50%) rotate(0deg);
   }

   &.collapsed::before {
       content: "\F2C2";
       transform: translateY(-50%) rotate(180deg);
   }
}

希望有帮助。

相关问题
最新问题