响应式导航栏切换菜单jQuery

Question

用户点击屏幕尺寸＆gt;页面上的任意位置后600px导航列表项目消失。

此外，9个面板的背景设置宽度为100％，但背景仍未完全覆盖页面，左侧和右侧仍显示空间。

任何有关找到这些问题的修复程序的帮助表示赞赏！ ： - ）

/*navigation icon animation*/
var trigger='X';

jQuery(document).ready(function () {
    $('#toggle-menu').click(function () {
        trigger='X';
        $(this).toggleClass('menu-is-active')

    });

    /* click outside of nav to trigger navigation icon animation*/
    $(document).click(function () {


        if (trigger=='X')
        {
            $("#toggle-menu").toggleClass();
            trigger='ham';
        }



    });
    $("nav").click(function (e) {
        e.stopPropagation();
        return false;
    });

    /*----/----navigation icon animation*/

    /*toggle menu*/
    jQuery("#toggle-menu").click(function () {
        jQuery(".nav").slideToggle();
    });
    /* click outside of nav to close toggle*/
    $(document).click(function () {
        $(".nav").hide();
    });
    $("#toggle-menu").click(function (e) {
        e.stopPropagation();
        return false;
    });
    /*----/----toggle menu*/

});

/****Landscape****/
/*global styles*/
.body {
    width: 100%;
    margin: 0;
    list-style: none;
    text-decoration: none;
}
a {
    color: #000000
}
a:focus, a:hover { color: #484747; }

a:active { color: #484747; }
/*----/----global styles*/

/*Nav Bar*/
.header {
    background: #d3d3d3;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
.nav {
    float: right;
    text-align: right;
    background-color: #d3d3d3;

}
.nav > li {
    display: inline-block;
    padding: 2px;
    padding-right: 30px;
}
/*----/----Nav Bar*/

/*Panels*/
.panel {
    width: 100%;
    height: 100%;
    background: #000000;
    text-align: center;

}

.panel .inner {
    padding-top: 10%;
    color: #df
}
.panel {
    color: #ffffff;
}
.panel.panel-blank {
    background: #ffffff;
    color: #000000;
}
/*----/----Panels*/

/*logo*/
.logo {
    float:left;
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 18px;
    cursor: pointer;
}
/*----/----logo*/


/****Portrait****/
@media (max-width: 600px) {
    /*global styles*/
    .body {
        width: 100%;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }
    .header {
        background: #d3d3d3;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
    .nav {
        position: fixed;
        width: 100%;
        text-align: center;
        display: none;
        background-color: #d3d3d3;
        left: 0;
        top: 39px;
    }
    .nav > li {
        display: block;
        float: center;
        border-bottom: 0.05em solid #000000;
    }
    .nav > li:last-child {
        border-bottom: none;
    }
    /*----/----global styles*/

    /*logo*/
    .logo {
        float:left;
        display: block;
        width: 15px;
        height: 15px;
        padding: 18px;
        cursor: pointer;
    }
    /*----/----logo*/

    /*navigation icon*/
    #toggle-menu {
        float:right;
        display: block;
        width: 15px;
        height: 15px;
        padding: 20px;
        cursor: pointer;
    }
    #toggle-menu div {
        width: 15px;
        height: 15px;
        position: relative;
    }
    #toggle-menu span {
        display: block;
        width: 15px;
        height: 3px;
        background: black;
        position: absolute;
        -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
        -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
        transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s,     opacity 0.2s ease-in-out 0.2s;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        transform-origin: center;
    }
    #toggle-menu span.top {
        top: 0px;
    }
    #toggle-menu span.middle {
        top: 6px;
    }
    #toggle-menu span.bottom {
        top: 12px;
    } 
    /*----/----navigation icon*/

    /*navigation icon animation*/
    #toggle-menu.menu-is-active span {
        -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
        -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out,     opacity 0.2s ease-in-out;
    }
    #toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active     span.middle {
        top: 6px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #toggle-menu.menu-is-active span.middle {
        opacity: 0;
    }
    #toggle-menu.menu-is-active span.bottom {
        top: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    /*----/----navigation icon animation*/
}
/*----/----Portrait*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
    <div class="navbar">

        <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a>

        <a id="toggle-menu">
            <div>
                <span class="top"></span>
                <span class="middle"></span>
                <span class="bottom"></span>
            </div>
        </a>

        <ul class="nav">
            <li><a href="" style="display: inline-block; width:100%;">Home</a></li>
            <li><a href="#panel8" style="display: inline-block; width:100%;">About</a></li>
            <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
            <li><a href="#panel7" style="display: inline-block; width:100%;">Contact</a></li>
        </ul>
    </div>
</div>

<div class="panel" id="panel1">
    <div class="inner"> 1 </div>
</div> 

<div class="panel panel-blank" id="panel2">
    <div class="inner"> 2 </div>
</div>

<div class="panel" id="panel3">
    <div class="inner"> 3 </div>
</div>

<div class="panel panel-blank" id="panel4">
    <div class="inner"> 4 </div>
</div> 

<div class="panel" id="panel5">
    <div class="inner"> 5 </div>
</div>

<div class="panel panel-blank" id="panel6">
    <div class="inner"> 6 </div>
</div>
<div class="panel" id="panel7">
    <div class="inner"> <P>contact</P> </div>
</div>
<div class="panel panel-blank" id="panel8">
    <div class="inner"> <p>Social</p> </div>
</div>
<footer>
    <div class="panel " id="panel9">
        <div class="inner"> Footer </div>
    </div>
</footer>

Answer 1

我没有看到第9个面板的宽度有任何问题。

根据你的课程，这是你想要的。

  

用户点击屏幕尺寸＆gt;页面上的任意位置后600px   导航列表项目消失

小提琴示例（根据您的评论更新）：https://jsfiddle.net/wexd3spp/19/

jQuery(document).ready(function () {
    $(window).resize(function(){
         if ($(window).width() >=600) {
            $(".nav").show();
        }
        else{ $(".nav").hide();}
    });
    $('#toggle-menu').click(function () {

        $(this).toggleClass('menu-is-active')

    });

    /* click outside of nav to trigger navigation icon animation*/
    $(document).click(function () {
        $("#toggle-menu").removeClass();
    });
    $("nav").click(function (e) {
        e.stopPropagation();
        return false;
    });

    /*----/----navigation icon animation*/

    /*toggle menu*/
    jQuery("#toggle-menu").click(function () {
        jQuery(".nav").slideToggle();
    });
    /* click outside of nav to close toggle*/
    $(document).click(function () {

        if ($(window).width() < 600) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
    });
    $("#toggle-menu").click(function (e) {
        e.stopPropagation();
        return false;
    });
    /*----/----toggle menu*/

});

Answer 2

好的，所以我自己制作了这个项目的副本并查看了你遇到的所有问题，并试图找到最简单的解决方案。

页面两侧间距的问题是因为你需要在css中添加以下内容：

body {
    margin: 0;
}

对于没有切换打开和关闭的导航，我执行了以下操作：

将此添加到您的css：

.show {
    display: block!important;
}

然后我写了一些简单的JQuery来切换导航：

  $('#toggle-menu').click(function(){
        $('.nav').toggleClass('show');
    });