单击列表项链接时再次滑动导航栏.main-menu具有“打开”类

时间:2017-07-24 14:30:00

标签: jquery

我使用这个jQuery代码进行移动菜单切换并添加类打开,这很好用

$('#menu-right-icon').click(function(){
var mainmenu = ".side-header nav.main-menu"
    $("#navbar").slideToggle(function() { 
        if ($(mainmenu).is(":visible")) {
            $(".main-menu").addClass("open");
        } else {
            $(".main-menu").removeClass("open");
        }
    });
});

然而,之后我想在点击列表项链接时再次实现slideToggle导航栏.main-menu有类“打开”,但是此解决方案不起作用,可能是因为类“open”不能在外面使用分配的功能

$('.side-header nav.main-menu.open li a').click(function(){
       $("#navbar").slideToggle();
       $(".main-menu").removeClass("open");
})

在这种情况下,效果很好,但在第一个if语句中我添加了addClass,slideToggle和removeClass,但这不是最佳解决方案,是否有更优雅的解决方案?

$('#menu-right-icon').click(function(){
var mainmenu = ".side-header nav.main-menu"
    $("#navbar").slideToggle(function() { 
        if ($(mainmenu).is(":visible")) {
            $(".main-menu").addClass("open");
            $('.main-menu.open li a').click(function(){
                $("#navbar").slideToggle();
                $(".main-menu").removeClass("open");
            })
        } else {
            $(".main-menu").removeClass("open");
        }
    });
});

1 个答案:

答案 0 :(得分:0)

运行良好的解决方案

$('#menu-right-icon').click(function(){
$("nav.main-menu").toggleClass("open");

$('.main-menu.open ul li a').click(function() {
    $("nav.main-menu").removeClass("open");
});

})