Here is the JSTL tags code I am using:
<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="#" >
♦${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>
Here is my JavaScript code:
$(document).on('click', '#headerCategory', function(){
alert("hello");
$('a.inactive').toggleClass('inactive active');
//$(this).toggleClass('active inactive');
});
And here is the CSS:
.skyblue li a.active{
background:#EF5F21;
color: #ffffff;
}
.skyblue li a.inactive{
background:0;
color: 0;
}
When running the above code, all dropdown menus are active. However, I want only the selected dropdown to be highlighted.
Please assist me in highlighting the selected dropdown list.