Question

使用Bootstrap 4.1构建可折叠的元素。

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>How do we get started?</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><i class="fas fa-caret-down"></i></a>
  </div>
  <div class="collapse" id="collapse1">
  <div class="card card-body">
    content...
  </div>
  </div>
</div>

如何将类从关闭时的插入符号更改为打开时的插入符号。

我知道我可以使用类似的东西

<script type="text/javascript">
    function changeClass(){
        // Code to swap the classes
    }
    $('#ToggleElement').click(changeClass);
</script>

我需要做些什么？

Answer 1

您可以使用jQuery的toggleClass。

function changeClass(event) {
  $(event.target).find('i.fas').toggleClass('fa-caret-down');
  $(event.target).find('i.fas').toggleClass('fa-caret-up');
}

Answer 2

第一

将初始班级从更改为使图标正常工作。（从fa s 中删除“ s”）
从select CASE when CD.Age between 0 and 5 then '0-5' when CD.Age between 6 and 11 then '6-11' when CD.Age between 12 and 14 then '12-14' when CD.Age between 15 and 17 then '15-17' when CD.Age between 18 and 24 then '18-24' when CD.Age between 25 and 54 then '25-54' when CD.Age between 55 and 64 then '55-64' when CD.Age > 65 then '65+' else 'Unknown' END AS Age_Group, count(distinct AP.Source_Individual_ID) as "Number of Clients Assisted" from dm.Assistance_Provided AP, rpt.ClientsDemographics CD where CD.Source_Individual_ID = AP.Source_Individual_ID and AP.SIR_ID = '1909' and AP.Service_Provided <> 'Assessment' and year(AP.Assisted_Date) = '2019' and month(AP.Assisted_Date) = 2 group by CASE when CD.Age between 0 and 5 then '0-5' when CD.Age between 6 and 11 then '6-11' when CD.Age between 12 and 14 then '12-14' when CD.Age between 15 and 17 then '15-17' when CD.Age between 18 and 24 then '18-24' when CD.Age between 25 and 54 then '25-54' when CD.Age between 55 and 64 then '55-64' when CD.Age > 65 then '65+' else 'Unknown' END到fas fa-caret-down

fa fa-caret-down

第二

添加js <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><i class="fa fa-caret-down"></i></a>逻辑以在单击类时切换该类

<script>

这将添加“点击时”侦听器，并在单击具有 id $(document).ready(function() { $("#ToggleElement").on("click", function() { $("#ToggleElement>i.fa-caret-down").toggleClass('fa-caret-up'); }); });的元素时切换fa-caret-up类。

这里的工作示例！

ToggleElement

Answer 3

您可以在没有JavaScript解决方法的情况下切换插入符号。

同时显示上下两个方向，并在两个父元素都具有collapsed时隐藏它们。

:not(.collapsed) > i.fas.fa-caret-down {
  display: none;
}

.collapsed > i.fas.fa-caret-up {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1 <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i>
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <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">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2 <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i>
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <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">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3 <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i>
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <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>

在锚点触发时切换类

3 个答案:

第一

第二

这里的工作示例！