Question

我正在尝试使用下拉列表中的图标创建活动状态。基本上它应该在li处于非活动状态时显示+图标，然后在li处于活动状态时显示 - 图标，反之亦然。

的jsfiddle http://jsfiddle.net/tebrown/uzrbbqx9/1/

$('#cssmenu > li:has(ul)').addClass("has-sub");

var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#cssmenu > li > a:eq(' + checkCookie + ')').addClass('active').next().show();
}
checkCookie = $.cookie("sub_nav-item");
if (checkCookie != "") {
$('#cssmenu > li > ul > li > a:eq(' + checkCookie +        ')').addClass('active').next().show();
}


$('#cssmenu > li > ul > li > a').click(function () {
var navIndex = $('#cssmenu > li > ul > li > a').index(this);
$.cookie("sub_nav-item", navIndex);
var checkElement = $(this).next();


$(this).removeClass('testing');
$(this).closest('li').addClass('testing');
$('#cssmenu li li .active').removeClass('active');
$(this).addClass('active');
});

$('#cssmenu > li > a').click(function () {
var navIndex = $('#cssmenu > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#cssmenu li ul').slideUp();


if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
} else {
    $(this).next().slideToggle();
}
$('#cssmenu li a').removeClass('active');

$(this).addClass('active');
});

非常感谢任何帮助。

Answer 1

我在这里修改了你的jfiddle：http://jsfiddle.net/uzrbbqx9/2/

在click事件中，activeClass方法总是在removeClass方法之后直接触发。我将它们移动到if语句中，如下所示：

if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
    $(this).removeClass('active');
} else {
    $(this).next().slideToggle();
    $('#cssmenu li a').addClass('active');
}

Answer 2

在点击事件处理程序中，您可以执行一些操作。您可以使用:animated jQuery选择器检查菜单当前是否具有动画效果，和/或您可以stop()正在进行的任何动画。在我的例子中，我选择忽略点击，如果它已经是动画。其次，由于动画，:visible选择器可以在快速单击按钮时给出一些误报/否定，因此您应该提示其他内容，例如活动类：

$('#cssmenu > li > a').click(function () {
    var $a = $(this),
        $ul = $a.next(),
        navIndex = $('#cssmenu > li > a').index(this);

    if ($ul.is(':animated'))
        return;

    $.cookie("nav-item", navIndex);
    $('#cssmenu li a.active').not(this).removeClass('active').next().stop().slideUp();

    $ul.stop().slideToggle();
    $a.toggleClass('active');

});

小提琴：http://jsfiddle.net/uzrbbqx9/3/

jQuery更改活动类图标的状态

2 个答案: