jQuery-在动态创建的菜单中更改菜单项路径的CSS [英] jQuery - change the CSS of the menu item's path in the dynamically created menu

问题描述

我正在使用jQuery垂直菜单库 www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm 我要完成对所选路径的选择.假设我通过以下路径通过菜单(在该站点上的演示中):

I'm using that jQuery Vertical Menu Library www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm I want to accomplish the selection of the selected path. Let's say that I go through that menu (in the demo on that site above) by the path:

Folder 2 > Folder 2.1 > Folder 3.1.1 > SubItem 3.1.1.1

当我单击SubItem 3.1.1.1时，我希望所有以前的项目(来自上面的路径)都更改其背景.下面的代码仅选择最上面的项目.该如何解决?

When I click on the SubItem 3.1.1.1 I want that the all previous items (from the path above) changes their backgrounds. The code below selects only the top-most item. How to fix that ?

    $('#nav > li').click(function () {
        $(this).children('a').css('background-color', 'red'); 
        $(this).parents('ul').each(function () { $(this).prev('a').css('background-color', 'red'); });
    });

.在这种情况下，我的代码将失败.

. In that scenario, my code fails.

推荐答案

菜单的组织方式，单击事件将从子级li冒泡到父级li，因此您只需绑定单击所有菜单项的事件并设置当前元素的背景:

The way the menu seems to be organized, the click event will bubble up from child li to parent li, so you just need to bind the click event to all menu items and set the background for the current element:

$('#nav li').click(function () {
    $(this).children('a').css('background-color', 'red'); 
});

当您单击另一个菜单项时，您仍可能希望取消设置红色背景

You still might like to unset the red background when you click on another menu item

这篇关于jQuery-在动态创建的菜单中更改菜单项路径的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！