javascript - 如何在点击时旋转箭头？

Question

我得到的菜单类似于带箭头的 Accordion 菜单，我想在单击链接时旋转该菜单。我尝试了一些方法，例如 css() 方法，但它不起作用。

这是我的 CodePen link ，但是这些箭头的字体很棒，它们在这个网站上消失了......

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样式。希望这会对您有所帮助。

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

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