jquery菜单onclick减去nav的宽度

Question

如何让减号navWidth工作？！

这是我的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>

这是我的css：

    header #menu_btn {
        font-size: 35px;
    margin: 0px 2%;
    line-height: 45px;
    }

nav {
    position: fixed;
    height: 100vh;
    width: 350px;
    right: -350px;
    top: 0;
    z-index: 150;
    background-color: #383838;
    transition: all 0.5s;
}

nav i {
    position: absolute;
    top: 3%;
    right: 7%;
    color: white;
}

nav ul {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-104.9%, -50%);
    list-style-type: none;
    text-align: left;
    line-height: 55px;
}

nav ul l i {}

nav ul li a {
    font-size: 16px;
    color: #c4c4c4;
    text-decoration: none;
}

nav ul li a:hover {
    color: #fff;
}

sdasodhusandjisadiandjskakjdnasjkdnasjkdnjaksndjksandjkankjsdnasjkdjkadsanjdkas ndjksandjksandkjsa ncsjand jksandjk ndjkasn dkjsanjk ndjkasn kdsa

Answer 1

我修改了：

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

＆＃13;

＆＃13;

$(document).ready(function () {

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

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

    $("#menu_close_btn").click(function () {
        $(".primary").css({
            "right": -$("nav").width() + "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-----------


    });

＆＃13;

header #menu_btn {
        font-size: 35px;
    margin: 0px 2%;
    line-height: 45px;
    }

nav {
    position: fixed;
    height: 100vh;
    width: 350px;
    right: -350px;
    top: 0;
    z-index: 150;
    background-color: #383838;
    transition: all 0.5s;
}

nav i {
    position: absolute;
    top: 3%;
    right: 7%;
    color: white;
}

nav ul {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-104.9%, -50%);
    list-style-type: none;
    text-align: left;
    line-height: 55px;
}

nav ul l i {}

nav ul li a {
    font-size: 16px;
    color: #c4c4c4;
    text-decoration: none;
}

nav ul li a:hover {
    color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<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>
</section>

＆＃13;

＆＃13;

＆＃13;