如何旋转点击箭头？

Question

我得到的菜单类似于带有箭头的手风琴菜单，当我单击链接时要旋转它。 我尝试了css（）方法之类的几件事，但是它不起作用。

这是我的CodePen 链接 ，但是这些箭头的字体真棒，它们在此站点上消失了...

JS：

$(document).ready(function(){
            $('.accordion-head').click(function(){
            //First close the one that is open      
                $('.dropdown-content').removeClass('visible-dropdown');
                $('.fa-angle-double-down').css('transform','rotate(0deg)');
            //Then open the one that's clicked on
                $(this).next('.dropdown-content').addClass('visible-dropdown');
                $(this).next('fa-angle-double-down').css('transform','rotate(-90deg)');
                if($(this).attr('class')!='active'){
                    $('.accordion-head').removeClass('active');
                    $(this).addClass('active');
                }
            })
        })

HTML：

<div class="main-container">
<div class="box">
    <header class="page-header">
        <h1>
        Podstawy technik programowania
        </h1>
    </header>
    <main class="main-content">
        <article class="single-article">
            <header class="article-title">
                <h1>Wstęp</h1>
            </header>
            <div class="article-content">
            <br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus at libero sed accumsan. Praesent faucibus a est non mattis. Vestibulum porttitor ac metus elementum sollicitudin. Donec turpis velit, placerat ac pharetra et, iaculis vitae nunc. Ut efficitur felis eu aliquam consectetur. Suspendisse feugiat, mauris ac gravida semper, massa sapien vulputate purus, id sagittis ligula justo sed turpis. Sed ornare quis risus sed luctus. Duis enim sapien, elementum vel tortor eget, auctor tempus urna. Pellentesque urna sapien, lacinia a lacus ac, congue fringilla leo.
            </div>
        </article>
    </main>
    <nav class="site-nav">
        <header class="nav-header">
            <h2>Spis treści</h2>
        </header>
        <section class="nav-menu">
            <a href="#" class="accordion-head">
            <span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Sieci komputerowe<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
        </section>
        <!-- <button class="hamburger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </button> -->
    </nav>

    </div>
</body>

Answer 1

一些东西：

• CSS旋转不适用于inline元素（如<span> ）。 尝试更改范围以display: inline-block; 代替。

• .next()查找当前元素之后的下一个匹配项。 在你的情况下， <span>你试图访问不是后 <a> ，这是它的一个孩子 。 您应该改用.children() 。

• 您的箭头开始时很漂亮且在您的文本旁边对齐，因为您已经进行了transform: translateY(-50%) ，但是您覆盖了jQuery中的transform属性而不包含它。 这导致箭头下降很多。 我已经将translateY(-50%)到您的jQuery中，以便箭头保持其位置。

• 考虑使用!$(element).hasClass()代替$(element).attr('class') != ...

jQuery的：

$(document).ready(function() {
  $('.accordion-head').click(function() {
    //First close the one that is open      
    $('.dropdown-content').removeClass('visible-dropdown');
    $('.fa-angle-double-down').css('transform', 'translateY(-50%) rotate(0deg)');
    //Then open the one that's clicked on
    $(this).next('.dropdown-content').addClass('visible-dropdown');

    //Changed .next() to .children()
    $(this).children('.fa-angle-double-down').css('transform', 'translateY(-50%) rotate(-90deg)');

    //Changed .attr("class") to .hasClass()
    if (!$(this).hasClass('active')) {
      $('.accordion-head').removeClass('active');
      $(this).addClass('active');
    }
  })
})

CSS：

span.fa-angle-double-down {
  display: inline-block;
}

更新的CODEPEN

Answer 2

只添加了一些CSS样式。 希望这对您有所帮助。

.nav-menu .accordion-head.active span.fa,
.nav-menu .accordion-head span.fa {
  transition: all .2s;
}

https://codepen.io/hunzaboy/pen/vZqyMN