У меня есть выпадающий список, и я хочу, чтобы шеврон вращался при нажатии на список. На данный момент это работает в 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>
Ожидается поворот шеврона при нажатии на ссылку, но это не так. Работает только в коде.