[英]jQuery toggle div and toggle class
我有一个侧面导航,用户可以点击一个链接,然后切换一个面板,其中包含该部分的选项。 我目前的问题是,当用户点击同一链接隐藏面板时,我需要能够删除该类。
现在,“活跃”状态正在链接上。 当你从一个链接点击到另一个链接时,它工作正常,但如果有人想要隐藏菜单,则id也会删除“活动”状态。 “活动”类在菜单上以青色突出显示。
jsFiddle: http : //jsfiddle.net/visualdecree/4A23Z/11/
jQuery的:
$(".sn a").on('click',function(){
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({slide:'toggle'}, 400);
$(panID)
.css({'left' : '100px','overflow':'visible'})
.stop()
.animate({width:'toggle'}, 400)
});
$('.sn').click(function(){
$('ul.sidenav li').removeClass('active');
$(this).stop(true,true).addClass("active");
});
您可以从removeClass函数中排除单击的项目,然后像这样切换它
改变了下面提供的jsFiddle。
$('.sn').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active');
$(this).stop(true, true).toggleClass("active");
});
您可以检查链接是否具有活动类,如果尚未激活,则仅添加此类:
$('.sn').click(function(){
var isActive $(this).hasClass('active');
$('ul.sidenav li').removeClass('active');
$(this).stop(true,true);
if(!isActive){
$(this).addClass("active");
}
});
或者只是切换活动类
$('.sn').click(function(){
$(this).toggleClass("active");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.