jquery菜单onclick减去导航的宽度

我如何让负导航宽度工作

这是我的jquery脚本

    $(document).ready(function () {

    //------------------menu-----------

    var navWidth = $("nav").css("width");

    $("#menu_btn").click(function () {
        $(".primary").css({
            "right": "0px",
        })
        $(".lightbox").show();
    });

    $("#menu_close_btn").click(function () {
        $(".primary").css({
            "right": -navWidth + "px",
        })
        $(".lightbox").hide()
    });

    $(".lightbox").click(function () {
        $(".primary").css({
            "right": -navWidth + "px",
        })
        $(this).hide();
    });

    $("nav ul li a").click(function() {
        $(".primary").css({
            "right": -navWidth + "px",
        })
    })

    $('a[href^="#"]').click(function () {

        $('html,body').animate({
            scrollTop: $(this.hash).offset().top
        }, 300);

        return false;

        e.preventDefault();

    });

    //------------------end menu-----------


    });

这是我的html：

    <section class="header" id="header">
        <header>
            <i class="fa fa-bars" id="menu_btn" aria-hidden="true"></i>
        </header>

        <nav class="primary">
            <i class="fa fa-times" id="menu_close_btn" aria-hidden="true"></i>
            <ul>
                <li><a href="#header">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#my_work">My Work</a></li>
            </ul>
        </nav>

SDASODHUSANDJISANDJKJDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKDNASJKD

"right": -$("nav").width() + "px",

$（文档）.ready（函数（）{
//------------------菜单-----------
$（“#菜单_btn”）。单击（函数（）{
$（“.primary”）.css({
“右”：“0px”，
})
$（“.lightbox”）.show（）；
});
$（“#菜单_关闭_btn”）。单击（功能（）{
$（“.primary”）.css({
“右”：-$（“导航”）.width（）+“px”，
})
$（“.lightbox”）.hide（）
});
$（“.lightbox”）。单击（函数（）{
$（“.primary”）.css({
“右”：-navWidth+“px”，
})
$（this.hide（）；
});
$（“nav ul li a”）。单击（函数（）{
$（“.primary”）.css({
“右”：-navWidth+“px”，
})
})
$（'a[href^=“#“]”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（this.hash）.offset（）.top
}, 300);
返回false；
e、 预防默认值（）；
});
//------------------结束菜单-----------
});
标题#菜单_btn{
字体大小：35px；
利润率：0px2%；
线高：45px；
}
导航{
位置：固定；
高度：100vh；
宽度：350px；
右：-350px；
排名：0；
z指数：150；
背景色：#3838；
过渡：均为0.5s；
}
导航一{
位置：绝对位置；
最高：3%；
右：7%；
颜色：白色；
}
导航ul{
位置：相对位置；
浮动：左；
最高：50%；
左：50%；
转换：翻译（-104.9%，-50%）；
列表样式类型：无；
文本对齐：左对齐；
线高：55px；
}
导航ull i{}
海军ulli a{
字体大小：16px；
颜色：#C4；
文字装饰：无；
}
导航ulli a：悬停{
颜色：#fff；
}






那么代码中的其他地方就有问题了。在网页中发布其余的代码（css、js等）。在这里，我用所有的html和css编辑了我的文章，JQUERI希望使其响应速度更快，因此nav的宽度为100%
"right": -$("nav").width() + "px",