活动菜单和切换旋转图标与jquery

Question

我想激活菜单并用它旋转图标

使用激活的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');
}
})

Answer 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>