我的 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="#" >
♦${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;
}
当我运行上面的代码时,所有下拉菜单都处于事件状态。但我希望只突出显示选定的下拉菜单。
帮我突出显示选择下拉列表。
最佳答案
还没有测试过,但是试试这个:
$(document).on('click', '#headerCategory', function(e){
$(e.target).toggleClass('inactive active');
});
如果这不起作用,您将不得不以不同的方式注册您的事件处理程序:
$('#headerCategory a').on('click', function(){
$(this).toggleClass('inactive active');
});
关于javascript - 动态制作的下拉列表,当选择任何列表时,我如何在每个下拉列表上使用事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28829265/