Question

我想在单击按钮时旋转fa-chevron-up并显示折叠的内容。当我们看到内容时箭头向下，当内容被拼合时，箭头会再次动画/旋转。 :) 我相信这并不难，但我不能让它发挥作用。它必须在vanilla js :)

我认为如果内容可见或不可见，可以使用在按钮上添加和删除的类来完成此操作。如果它已折叠，则向下箭头，如果它打开，则为另一种方式:)

<button id="the-button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="left">
        <i class="fa fa-desktop" aria-hidden="true"></i> CREATIVITY
    </div>
    <div class="right">
        <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </div>
</button>



document.getElementById('the-button').addEventListener('click', function () {


    var arrow = document.getElementsByClassName("right fa-chrevron-up");
    arrow.classList.add("rotate");

});

Answer 1

您的代码存在一些问题：

document.getElementsByClassName("right fa-chrevron-up")将获取符合此选择器的所有元素。这也将返回NodeList而不是元素。所以它没有属性classList
您的拼写错误：fa-chrevron-up。它应该是fa-chevron-up。请注意r之后的-ch。

理想情况下，您应该使用当前元素并导航到必要的元素。这将确保您获取正确的元素。

document.getElementById('the-button').addEventListener('click', function() {
  var icon = this.querySelector('.right i.fa');
  icon.classList.toggle('rotate');
});

.animate-icon {
  transition: 0.4s;
}
.rotate {
  transform:rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button id="the-button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="left">
        <i class="fa fa-desktop" aria-hidden="true"></i> CREATIVITY
    </div>
    <div class="right">
        <i class="animate-icon fa fa-chevron-up" aria-hidden="true"></i>
    </div>
</button>

Answer 2

我为你的箭测试旋转，试试这个：

var btn = document.querySelector('.btn');
var fa = document.querySelector('.fa-chevron-up');

btn.addEventListener('click', function () {

    if (fa.style.transform === '') {
        fa.style.transform = 'rotate(180deg)'
    } else {
        fa.style.transform = ''
    }

});

如果您想显示折叠的内容，只需添加：

element.style.display: block;

到if状态，然后在else中添加：

element.style.display: none;

无论如何你想要顺利添加到css：

transition: 1s all;

我希望对你有所帮助:)。

Answer 3

$('[data-toggle="collapse"][data-target="#collapseTwo"]').on('click', function(){
  $(this).attr('data-state', $(this).attr('data-state')=='close' ? 'open':'close');
  switch( $(this).attr('data-state') ) 
  {
    case 'open':
      $(this).find('.right .fa').addClass('fa-chevron-down').removeClass('fa-chevron-up');
    break;
    case 'close':
      $(this).find('.right .fa').addClass('fa-chevron-up').removeClass('fa-chevron-down');
    break;
  }
});

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btn-link collapsed" data-state="close" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  <div class="left">
    <i class="fa fa-desktop" aria-hidden="true"></i> CREATIVITY
  </div>
  <div class="right">
    <i class="fa fa-chevron-up" aria-hidden="true"></i>
  </div>
</button>

香草js，按钮单击旋转fa图标

3 个答案: