如何修改Bootstrap手风琴中的箭头？

Question

如何修改Bootstrap手风琴中的箭头？

3

我编写了一些JavaScript，并尝试在aria-expanded元素为true或false时替换类，但似乎没有任何反应。因为aria-expanded ="true"，所以页面加载时第一个卡片是打开的。我想找到一种方法，在aria-expanded元素的值更改时替换中的类。我是jQuery和webdev的新手，非常感谢您的帮助。编辑-我使用了bootstrap手风琴确保一次只能打开一个

<div id="headingOne">
    <h5 class="card-title">
        Or Files
        <a data-toggle="collapse" class="float-right" href="#collapseFiles" 
          role="button" aria-expanded="true" data-target="#collapseFiles" 
          aria-controls="collapseNotes">
            <i class="fas fa-angle-up></i>
        </a>
    </h5>
</div>
<div id="headingTwo">
             <h5 class="card-title">
             Or Notes
                <a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
                        <i class="fas fa-angle-down"></i>
                </a>
              </h5>
  </div>
<div id="headingThree">
             <h5 class="card-title">
             Or Names
                <a data-toggle="collapse" class="float-right" href="#collapseNames" role="button" aria-expanded="false" data-target="#collapseNames" aria-controls="collapseNotes">
                        <i class="fas fa-angle-down"></i>
                </a>
              </h5>
  </div>

这是jQuery。

if ($('a').attr('aria-expanded').val() == 'true') {
    $("a i").attr("class", "fa-angle-down");
} else {
    $("a i").attr("class", "fa-angle-up");
}

- Fairy Song

4个回答

0

你需要使用事件来捕获变化，例如https://api.jquery.com/on/。

- sonic

0

试试这个：

$('[data-toggle="collapse"]').on('click', function(){
    if ($(this).attr('aria-expanded') == 'true') {
        $(this).find('i').addClass('fa-angle-up').removeClass('fa-angle-down');
    } else {
        $(this).find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
    }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div id="headingTwo">
    <h5 class="card-title">
        Or Notes
        <a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
            <i class="fa fa-angle-up"></i>
        </a>
    </h5>
</div>
<div class="collapse" id="collapseNotes">
    Anim pariatur cliche reprehenderit
</div>

- souravmsh

这似乎也没有做出任何更改。 - Fairy Song

我已经添加了代码片段，现在你可以看到输出结果。 - souravmsh

-1

虽然已经有一段时间了，但我认为这可能是对这个问题的一个很好的答案：不需要使用JavaScript。利用当手风琴折叠时添加到包装“a”中的类“collapsed”。

<a data-toggle="collapse" class="float-right" href="#collapseFiles" 
      role="button" aria-expanded="true" data-target="#collapseFiles" 
      aria-controls="collapseNotes">
  <span class="arrowup"> <i class="fas fa-angle-up></i> </span>
  <span class="arrowdown"> <i class="fas fa-angle-dowm></i> </span>
</a>

然后在你的样式表中：

.accordion .arrowdown { display: none }

.accordion .collapsed .arrowup { display: none }

.accordion .collapsed .arrowdown{ display: block }

- Ignacio Gomez

1

这是一个旧问题上已批准答案的相同实现。 - Moudi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Liang · Accepted Answer

我知道你可能想使用JavaScript来实现它，但我有一种纯CSS的方法：

HTML

我删除了锚点标签上所有不必要的属性。我还删除了图标上的fa-angle-down。图标状态将通过CSS设置。

<div id="headingOne">
    <h5 class="card-title">
        Or Files
        <a data-toggle="collapse" class="float-right" data-target="#collapseFiles">
            <i class="fas"></i>
        </a>
    </h5>
    <div class="card-body">
        <p id="collapseFiles" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>
<div id="headingTwo">
    <h5 class="card-title">
        Or Notes
        <a data-toggle="collapse" class="float-right" data-target="#collapseNotes">
            <i class="fas"></i>
        </a>
    </h5>
    <div class="card-body">
        <p id="collapseNotes" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>
<div id="headingThree">
    <h5 class="card-title">
        Or Name
        <a data-toggle="collapse" class="float-right" data-target="#collapseNames">
            <i class="fas"></i>
        </a>
    </h5>
    <div  class="card-body">
        <p id="collapseNames" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>

CSS

您可以编写CSS来针对任何具有 data-toggle="collapse" 属性的锚点标签进行定位。当它折叠时，Bootstrap会添加 .collapsed 类，以便您可以使用它来相应地设置图标样式。

a[data-toggle="collapse"] i.fas:before {
    content: "\f107";    /* angle-down */
}

a[data-toggle="collapse"].collapsed i.fas:before {
    content: "\f106";    /* angle-up */
}

屏幕截图

Fiddle演示

https://jsfiddle.net/davidliang2008/og1t8ksj/26/