Question

这是我的代码：http://jsfiddle.net/u5brv/8/

$('#nav li').click(function (e) {
    e.stopPropagation();
    $('ul #items').toggle(100);
});

$(document).click(function() {
    $('#items').hide();
});

我正在尝试在下拉菜单打开时更改顶级菜单“顶级”css。我在CSS中有一个活动类，但是如何在扩展它时将这个CSS类应用到菜单中。

Answer 1

<强> Demo

使用toggleClass('active')或add/removeClass()个功能。

CSS ：

li.active {
    background : red;
}

JS ：

$('#nav li').click(function (e) {
    e.stopPropagation();
    $('ul #items').toggle(100);
    $(this).closest('#nav > li').toggleClass('active')
});

$(document).click(function () {
    $('#items').hide();
    $('li').removeClass('active')
});

Answer 2

试试这个：

$('#nav li').click(function (e) {
 e.stopPropagation();
 $(this).toggleClass('active')
 $('ul #items').toggle(100);
});

$(document).click(function() {
 $('.active').removeClass('active')
 $('#items').hide();
});

<强> Working Demo

应用css类打开下拉列表

2 个答案: