Question

我的菜单与带有箭头的手风琴菜单类似，当我点击链接时我想要旋转。我尝试过像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轮换不适用于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;
}

UPDATED 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

如何在点击时旋转箭头？

2 个答案:

UPDATED CODEPEN