jquery移动端折叠导航栏+pc响应式导航栏

效果图：

 

1.html

<nav class="header-menu navbar navbar-expand-lg navbar-light">

        <a class="bar-menu-img" href="/"><img src="" alt=""></a>
        <!-- 菜单 -->
        <div class="drawer-box pc-menu-box">
            <ul class="menu-list">
                <ul id="w2" class="menu-list nav">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="dropdown nav-item">
                        <a class="dropdown-toggle nav-link active" href="#" data-toggle="dropdown">产品</a>
                        <div id="w3" class="dropdown-menu" style="display: none;">
                            <a class="dropdown-item active" href="#">全部</a>
                            <a class="dropdown-item" href="#">产品1</a>
                            <a class="dropdown-item" href="#">产品2</a>
                            <a class="dropdown-item" href="#">产品3</a>
                            <a class="dropdown-item" href="#">产品4</a>
                            <a class="dropdown-item" href="#">产品5</a>
                            <a class="dropdown-item" href="#">产品6</a>
                        </div>
                    </li>
                    <li class="dropdown nav-item"><a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">推荐</a>
                        <div id="w4" class="dropdown-menu">
                            <a class="dropdown-item" href="#">推荐1</a>
                            <a class="dropdown-item" href="#">推荐2</a>
                            <a class="dropdown-item" href="#">推荐3</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">订单</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">购物车</a></li>
                </ul>
            </ul>
        </div>
        <a href="#">
            <div class="header-menu-search">
                <input type="text" placeholder="请输入关键词">
                <i class="icon-search"></i>
            </div>
        </a>
        <button class="navbar-toggler mini-navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

2.css

*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
a:hover {
    color: #1296db;
}


/* .header-menu {
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    height: 70px;
} */

nav {
    width: 100%;
    margin: 0 auto;
}

.header-menu {
    padding-top: 4px;
    padding-bottom: 5px;
    max-width: 1194px;
    max-height: 90px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}


/* 下拉菜单样式 start*/

.header-menu .drawer-box .menu-list .dropdown-menu {
    border-radius: 1.25rem;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}

.header-menu .drawer-box .menu-list .dropdown-menu .dropdown-item {
    color: #333;
}


/* 下拉菜单样式 end*/

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.header-menu .bar-menu-img img {
    max-width: 200px;
}

@media screen and (min-width: 769px) {
    .header-menu .pc-menu-box .menu-list {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    }
}

@media screen and (max-width: 768px) {
    .header-menu .header-menu-search input {
        padding: 6px 12px!important;
        padding-right: 0;
    }
    .header-menu {
        padding: 0;
        height: 42px;
    }
    .header-menu .drawer-box .menu-list li {
        width: 52%;
        margin: 0 auto;
        height: 9%;
    }
    .header-menu .pc-menu-box .menu-list .nav-item .nav-link {
        padding: 20px 7px;
        /* margin-left: 50px; */
        font-size: 14px;
    }
    .header-menu .drawer-box .menu-list li {
        width: 52%;
        margin: 0 auto;
        height: 9%;
    }
    .nav {
        flex-flow: row nowrap;
        overflow: auto;
    }
    .header-menu .drawer-box .menu-list {
        display: inherit;
        width: 76%;
        height: 100%;
        margin-top: 0;
        background: #fff;
        font-size: 16px;
    }
    .header-menu .drawer-box {
        display: none;
        position: fixed;
        top: 55px;
        left: 0;
        width: 100vw;
        height: calc(105vh - 82px);
        background: rgba(0, 0, 0, .4);
        z-index: 3;
    }
    .header-menu .header-menu-search {
        -ms-flex: 1;
        flex: 1;
        margin-right: 3rem;
        max-width: 120px;
    }
    .header-menu .header-menu-search input {
        padding-right: 30px;
        padding: 6px 12px;
    }
    .bar-menu-img img {
        width: 100%;
    }
    .header-menu .bar-menu-img img {
        max-width: 180px !important;
    }
    .header-menu .mini-navbar-toggler {
        display: block!important;
        padding-right: 0;
        background: url(../img/mini_navbar-toggler.png) no-repeat center center;
        background-size: 100%;
        width: 38px;
        height: 38px;
        position: absolute;
        top: 2px;
        right: 5px;
        padding-left: 0;
    }
    .navbar-light .navbar-toggler-icon {
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        z-index: 1000;
    }
}

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    color: #333;
    display: block;
    padding: 0.5rem 1rem;
}

dd,
dl,
dt,
li,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropup,
.dropright,
.dropdown,
.dropleft {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}

.active {
    color: #1296db;
}

.header-menu .bar-menu-img img {
    max-width: 200px;
}

.header-menu .header-menu-search input {
    width: 100%;
    display: inline-block;
    padding: 6px 19px;
    padding-right: 35px;
    border: 1px solid #ccc;
    border-radius: 1.67em;
    font-size: 12px;
    color: #666;
}

.header-menu .header-menu-search .icon-search {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px;
}

.icon-search {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/icon-search@2x.png) center center no-repeat;
    background-size: 100% 100%;
}

.header-menu .mini-navbar-toggler {
    display: none;
    border: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: 50% / 100% 100% no-repeat;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

3.js

/* 公共逻辑 */
$(function() {
    $('.drawer-box.pc-menu-box').on('click', '.list_item', function(evt) {
        evt.stopPropagation();
        var width = $('body').width();
        var $target = $(evt.target);
        var $parent = $target.parent();
        if (width >= 768) {
            return false;
        }
        if (!$parent.hasClass('sub_list_title')) {
            return true;
        }
        if ($parent.parent().hasClass('expanded')) {
            $parent.parent().removeClass('expanded');
        } else {
            $parent.parent().addClass('expanded');
        }
        return false;
    });
    // 切换菜单
    console.log('移动端');
    $('.header-menu .mini-navbar-toggler').on('click', function(evt) {
        console.log('移动端点击导航栏图标');
        evt.stopPropagation();

        if ($('.drawer-box.pc-menu-box').hasClass('active')) {
            $('.drawer-box.pc-menu-box').removeClass('active');
            $('body').removeClass('body_fixed');
        } else {
            $('.drawer-box.pc-menu-box').addClass('active');
            $('body').addClass('body_fixed');
            $('.header-menu .drawer-box').show();

        }
    });
    // $('.header-menu').on('click', '.mini-navbar-toggler', function(evt) {
    //     evt.stopPropagation();
    //     console.log('移动端点击导航栏图标');
    //     if ($('.drawer-box.pc-menu-box').hasClass('active')) {
    //         $('.drawer-box.pc-menu-box').removeClass('active');
    //         $('body').removeClass('body_fixed');
    //     } else {
    //         $('.drawer-box.pc-menu-box').addClass('active');
    //         $('body').addClass('body_fixed');
    //     }
    // });
    // 点击其他区域关闭菜单
    $('body')
        .not('.drawer-box.pc-menu-box')
        .on('click', function(evt) {
            $('.drawer-box.pc-menu-box').removeClass('active');
            $('body').removeClass('body_fixed');
            $('.header-menu .drawer-box').hide();
        });


    /**
     * 首页菜单，一级菜单点击后直接进入页面
     */
    $('.menu-list .nav-link').on('click', function() {
        if ($(this).hasClass('dropdown-toggle')) {
            window.location.href = $(this).attr('href');
        }
    });
    // 鼠标经过联系我们显示下拉菜单
    $("#contact").mouseover(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).siblings("ul").show();
        $(".items-content").stop().show();
    });
    $("#contact").mouseout(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(".items-content").stop().hide();
    });
    // 鼠标放到顶部的“联系我们”，解决下拉框消失问题
    $(".items-content").mouseover(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).siblings("ul").show();
        $(".items-content").stop().show();
    });
    $(".items-content").mouseout(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(".items-content").stop().hide();
    });
    // 鼠标经过导航栏显示下拉菜单
    $(".dropdown").mouseover(function() {
        console.log("鼠标经过下拉菜单");
        $(this).children(".dropdown-menu").stop().show();
    });
    $(".dropdown").mouseout(function() {
        $(this).children(".dropdown-menu").stop().hide();
    });
    //鼠标经过显示二维码
    $(".header-navbar-menu .item-l,.showpic-l").hover(function() {
        $(".showpic-l").show();
    }, function() {
        $(".showpic-l").hide();
    });
    $(".header-navbar-menu .item-r,.showpic-r").hover(function() {
        $(".showpic-r").show();
    }, function() {
        $(".showpic-r").hide();
    });
});