切换sidenav上的jquery切换类答案

【问题标题】：jquery toggle class on toggled sidenav切换sidenav上的jquery切换类
【发布时间】：2012-08-30 08:40:16
【问题描述】：

基本上，如果您查看我的示例，您会看到您单击了一个链接，该链接会启动切换，然后您可以单击另一个链接，它将切换下一个面板。

我的问题是，实际上，我打算使用精灵作为图标，为了将背景位置减去到正确的位置，我需要一个“活动”类应用于链接并激活切换。我相信我在我的示例中看错了，因为我只是将一个类应用于单击的链接。我不确定如何以我希望的方式应用它，或者是否确实可行。

我的代码是：

http://jsfiddle.net/visualdecree/4A23Z/5/

【问题讨论】：

我不太明白你想要达到什么目的。你想达到什么目标，是什么阻止你这样做？重现此问题需要哪些步骤？
更新了问题以尝试更好地解释它，对此感到抱歉
是否有任何答案接近您正在寻找的内容？您的问题中有一个连字符 (-)，那里缺少单词，它们是什么？

标签： jquery toggle toggleclass

【解决方案1】：

如果我理解正确 - 试试这个 jsfiddle（或 this 定义了活动类）

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    var link = this;
    $(panID).css("left","100px").animate({width:'toggle'}, 500, function()                      { 
        $(".sn a").removeClass("active");
        $(link).toggleClass("active");
    })
})

【讨论】：

好像差别不大
行为 - 是的。但是>基本上试图在导航栏上的活动项目上获得一个类。单击后，活动课程位于侧边栏中的活动链接上

【解决方案2】：

希望我能理解问题...

http://jsfiddle.net/4A23Z/8/

我添加了样式以突出显示活动的菜单项。添加了代码以在切换活动 LI 之前删除 LI 上的所有活动类。

ul.sidenav li.active { background:cyan; }

 $('.sn').click(function(){
    $('ul.sidenav li').removeClass('active');                 
    $(this).stop(true,true).toggleClass("active");
});

编辑：

http://jsfiddle.net/4A23Z/10/

$('.sn').click(function(){
    $('ul.sidenav li').removeClass('active');                    
    $(this).stop(true,true).addClass("active");
});

【讨论】：

这似乎对我有用，我错过了删除类部分。谢谢你
我注意到一件事，如果您单击相同的链接关闭菜单，活动不会被删除，我可以添加什么来解决这个问题吗？
如果您查看jsfiddle.net/visualdecree/4A23Z/11 我有它，因此您可以单击打开菜单，再次单击关闭，但当您单击相同链接时隐藏菜单并不会删除课程。