如何旋轉點擊箭頭？

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