Выпадающий шеврон не вращается - PullRequest
Новая
       23

Выпадающий шеврон не вращается

0 голосов
/ 17 июня 2019

У меня есть выпадающий список, и я хочу, чтобы шеврон вращался при нажатии на список. На данный момент это работает в codepen. Но когда я перенесу это на сайт, над которым я работаю, шеврон не будет двигаться. Как лучше всего протестировать и исправить эту проблему?

Я попытался удалить все остальные библиотеки jquery и конфликтующие библиотеки jquery.

https://codepen.io/ryannewell/pen/gNrEPd

<!DOCTYPE html>
<html>
    <head>

 <title>Chevron</title>
 <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js"></script>
 <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/v4-shims.js"></script>

    <style>
    .rotate {
        -moz-transition: all 0.1s linear;
        -webkit-transition: all 0.1s linear;
        transition: all 0.2s linear;
        color: #fff;
    }

    .rotate.down {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .side {
        background-color: grey;
    }
    </style>
    </head>

<body>

    <div class="side">
    <li>
        <a href="#ContactSubmenu" data-toggle="collapse" class="accordion">
        <i class="fas fa-envelope-square"></i>Contact Links<i class="fas fa-angle-down rotate"></i></a>
        <ul class="collapse list-unstyled leftalign accordion-desc">
        <li>
            <a>
            Dropdown list
            </a>
        </li>
        </ul>
    </li>
    </div>

    <script>
    $(document).ready(function() {
        $(".accordion-desc").fadeOut(0);
        $(".accordion").click(function() {
          $(".accordion-desc").not($(this).next()).slideUp('fast');
          $(this).next().slideToggle(400);
        });
      });

      $(".accordion").click(function() {
        $(".accordion").not(this).find(".rotate").removeClass("down");
        $(this).find(".rotate").toggleClass("down");
      });
    </script>

</body>
</html>

Ожидается поворот шеврона при нажатии на ссылку, но это не так. Работает только в коде.

1 Ответ

0 голосов
/ 17 июня 2019

Не уверен, что вы скопировали и вставили точно так, как вы это делаете в своем фактическом коде (не в CodePen), но в вашем примере кода ваши CSS и JavaScript не входят в теги style или script.

...