javascript - 更改管理员菜单类在单击时不起作用

Question

我想进行管理员导航。当我单击菜单时，它将一直处于活动状态，直到我单击另一个菜单。当我单击另一个菜单时，该菜单应处于活动状态。在我的管理员导航中，我使用了以下代码，但它不起作用。我所有的CSS都可以正常工作，但是我无法将单击的菜单设置为活动状态。我该如何解决这个问题？

$(function() {
  $('li').click(function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
  });
});

    .admin-menu ul {
    padding: 0;
    margin: 0;
}

.admin-menu ul li {
    list-style: none;
    transition: .4s;
}

.admin-menu ul li a {
    color: #333;
    display: block;
    padding: 10px 15px;
    font-size: 16px;
    text-transform: capitalize;
}

.admin-menu ul li:hover, li.active {
    background-color: #F8694A !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
  <div class="admin-menu">
    <ul>
      <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
      <li><a href="#"><i class="far fa-list-alt"></i> Category</a></li>
      <li><a href="#"><i class="fas fa-book"></i> Books</a></li>
      <li><a href="#"><i class="fas fa-users"></i> Users</a></li>
      <li><a href="#"><i class="fas fa-chalkboard-teacher"></i> E-books</a></li>
      <li><a href="#"><i class="fas fa-cart-arrow-down"></i> Orders</a></li>
      <li><a href="#"><i class="fas fa-layer-group"></i> Others</a></li>
      <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
      <li><a href="#"><i class="fas fa-power-off"></i> Logout</a></li>
    </ul>
  </div>
</div>

Answer 1

将您的JS更改为此，并确保包括jQuery库：

$('a').click(function() {
  $(this).parents().find(".active").removeClass('active');
  $(this).addClass('active');       
});