Блог

Главная - Вопросы по программированию - активное меню и переключение значка поворота с помощью jquery

активное меню и переключение значка поворота с помощью jquery

#html #jquery #css

Вопрос:

Я хочу активировать меню и повернуть значок с его помощью

Поверните значок с меню li активного

Но значок не возвращается в предыдущее состояние

jquery

 $(document).ready(function() {
    $("").on("click", function() {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    })
})

$(document).ready(function () {
    if ($(this).find('.rotate').toggleClass('down')) {
    } else {
        $('.rotate').removeClass('down').addClass('.rotate');
    }
})

Комментарии:

1. Не могли бы вы также добавить HTML в свой вопрос?

2. addClass('.rotate'); должно быть addClass('rotate'); без точки на селекторе

Ответ №1:

Попробуйте приведенный ниже фрагмент.

 $(document).on('click','.menu-item',function(e){
  e.preventDefault();
  $(this).next().toggleClass('hide');
  $(this).parent().toggleClass('active');
}) 
 .hide{display:none;}
li.active .fa-caret-down {
  transform: rotate(180deg);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<ul>
  <li><a href="#" class="menu-item">Menu 1<i class="fas fa-caret-down"></i></a>
    <ul class="mobile-sub-menu hide">
      <li><a href="#">Sub menu 1</a></li>
      <li><a href="#">Sub menu 2</a></li>
      <li><a href="#">Sub menu 3</a></li>
    </ul>
  </li>
  <li><a href="#" class="menu-item">Menu 2<i class="fas fa-caret-down"></i></a>
    <ul class="mobile-sub-menu hide">
      <li><a href="#">Sub menu 4</a></li>
      <li><a href="#">Sub menu 5</a></li>
      <li><a href="#">Sub menu 6</a></li>
    </ul>
  </li>
</ul>
Метки: