javascript - 如何只让当前子菜单获得事件类而不是所有子菜单？

Question

当我单击菜单中的子菜单项时，所有子菜单项都获得 main-nav-active 类，但我只想让父级和当前子菜单项具有main-nav-active 类。

这是我的菜单:

$(function() {
    $('.menu .main-nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('main-nav-active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu float-right pr-4 pt-4 mt-1">
   <ul class="main-nav">
      <li>
         <a href="/">Home</a>
      </li>
      <li class="position-relative">
         <a href="/zonwering">Zonwering</a>
         <div class="dropdown-content">
            <span><a href="/zonwering/terrasscherm">- Terrasscherm</a></span>
            <span><a href="/zonwering/terrassoverkapping">- Terrasoverkapping</a></span>
            <span><a href="/zonwering/screens">- Screens</a></span>
            <span><a href="/zonwering/rolluiken">- Rolluiken</a></span>
            <span><a href="/zonwering/markiezen">- Markiezen</a></span>
            <span><a href="/zonwering/uitvalscherm">- Uitvalscherm</a></span>
         </div>
      </li>
      <li>
         <a href="/terrasoverkapping">Terrasoverkapping</a>
      </li>
      <li>
         <a href="/over-ons">Over ons</a>
      </li>
      <li>
         <a href="/contact">Contact</a>
      </li>
      <li>
         <a href="/offerte-aanvragen">Offerte aanvragen</a>
      </li>
   </ul>
</div>

Answer 1

在每个 SPAN 中添加 AUX 类。

$(document).on('click', '.aux', function({
    $(this).addClass('main-nav-active'); // or child, you change
    $(this).parent('.dropdown-content').addClass('main-nav-active'); 
}))