动态制作的下拉列表，选择任何列表时，我如何在每个下拉列表上使用活动类别

Question

我的 JSTL 标签代码如下：

<ul class="megamenu skyblue">
 <!--1st level of categories  -->
 <c:forEach var="item1" items="${shoppingCart.categories}">
  <li id="headerCategory" class="grid" style="border-right: 1px solid #e5edec;">
   <a  class="inactive color1" href="#">${item1.name}</a>
   <div class="megapanel">
    <div class="row">
     <fmt:parseNumber var="i" type="number" value="${item1.id}" />
     <c:forEach var="item2" items="${shoppingCart.subcategories}">
      <c:if test="${item2.parentCategory.id==i}">
       <div class="col1">
        <div class="h_nav">
         <h4>
          <a href="#" onclick="dispProductCategoryWise('${item2.name}','${item2.id}')">${item2.name}</a>
         </h4>
         <ul>
          <fmt:parseNumber var="j" type="number" value="${item2.id}" />
          <c:forEach var="item3" items="${shoppingCart.subcategories}">
           <c:if test="${item3.parentCategory.id==j}">
            <li>
             <a href="#" >
              &#9830;${item3.name}
             </a>
            </li>
           </c:if>
          </c:forEach>
         </ul>
        </div>
       </div>
      </c:if>
     </c:forEach>
     <%-- <img src="${pageContext.request.contextPath}${item1.image}" alt=""/> --%>
    </div>
   </div></li>
 </c:forEach>
</ul>

我的 JavaScript 代码如下：-

$(document).on('click', '#headerCategory', function(){
    alert("hello");
    $('a.inactive').toggleClass('inactive active');
    //$(this).toggleClass('active inactive');
});

而css是：-

.skyblue li a.active{
    background:#EF5F21;
    color: #ffffff;
}
.skyblue li a.inactive{
    background:0;
    color: 0;
}

当我在上面运行一段代码时，所有的下拉菜单都处于活动状态。但我希望如何仅突出显示选定的下拉菜单。

帮我突出显示选择下拉列表。

Answer 1

还没有测试过，但是试试这个：

$(document).on('click', '#headerCategory', function(e){
    $(e.target).toggleClass('inactive active');
});

如果这不起作用，您将不得不以不同的方式注册您的事件处理程序：

$('#headerCategory a').on('click', function(){
    $(this).toggleClass('inactive active');
});