在 SlideToggle nag 上添加活动类答案

【问题标题】：Add active class on SlideToggle nag在 SlideToggle nag 上添加活动类
【发布时间】：2013-02-20 02:56:43
【问题描述】：

我正在尝试编辑这段代码以在我单击的元素上添加一个“活动”类，并在我单击导航的另一个项目时自动将其删除...

    var firstTime = true;
    $("#nav a").click(function() {
    var divname = this.name;
    $(this).addClass( "active", "fast", "easeOutBounce" );
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
        } else {

            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");

            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }

});

我应该在哪里添加一个 .removeClass("active") 来完成这项工作...？

谢谢

【问题讨论】：

标签： javascript jquery submenu nav

【解决方案1】：

我认为最好的方法是检查它是否处于活动状态，只有在这种情况下，才更改活动元素。

这样您的解决方案会更高效。

if (this.className.indexOf('active') == -1) {
    //remove class from actual selected
    var selected = $('#nav a.active');
    selected.removeClass( "active").text('');
    // add class here
    $(this).addClass( "active", "fast", "easeOutBounce" );
    $(this).text('active');
} else {
    $(this).removeClass( "active").text('');
}

试一试here一个有效的例子

【讨论】：

@Steve Forest 我改进了我的解决方案以最适合您的问题。试试我的代码jsFiddle
我尝试了您的解决方案（虽然删除了 .text，但我不想更改链接文本）但是如果我单击同一个菜单项，我首先单击以隐藏子导航，仍然上面有活动课程...您可以查看我之前提供的链接intelia.steveforest.com
所以你想在点击选定元素时切换 active 类？我不明白。请找到here更新后的代码

【解决方案2】：

var firstTime = true;
    $("#nav a").click(function() {
    var divname = this.name;
    $('#nav a.active').removeClass('active');
    $(this).addClass( "active", "fast", "easeOutBounce" );
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
            $('#nav a.active').removeClass('active');
        } else {

            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");


            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }

});

【讨论】：

效果很好！ Thx，唯一的事情是，如果我再次单击同一个导航项目，即 subnav slideUp，但 .active 仍然存在...intelia.steveforest.com
您现在在您的站点上运行的代码在检索所选项目以删除类的方式上有些不同。
$('#nav a.active').removeClass('active'); 将删除所有活动类，然后将新类添加到#nav 中的所有项目
还是一样...如果我从一个项目切换到另一个项目，但如果我点击同一个导航项目...活动类仍然存在
我想我明白当您“再次单击”以隐藏子列表时，您还想删除活动类...对吗？

【解决方案3】：

就这么做

var firstTime = true;
$("#nav a").click(function() {
var divname = this.name;
//Remove existing 'active' class
$('.active').removeClass('active');
$(this).addClass( "active", "fast", "easeOutBounce" );
[...]

【讨论】：