Адаптивное многоуровневое меню с использованием jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

body {font-family: Arial; margin: 0; padding: 0;}
.container {max-width: 920px; margin: 0 auto}
nav {background: cornflowerblue;}
.ham {
    display: none;
    background: none;
    position: absolute;
    min-width: 40px;
    min-height: 24px;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    top: 15px;
    right: 15px;
    z-index: 3;
}
.ham > .bar {
    display: block;
    background: #818285;
    position: absolute;
    left: 0px;
    width: 70%;
    height: 4px;
    border-radius: 6px;
    -webkit-transition: all 350ms;
    transition: all 350ms;
}
.ham > .bar:first-child {
    top: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.ham > .bar:nth-child(2) {
    top: 10px;
}
.ham > .bar:last-child {
    bottom: 0;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}
.ham.opened > .bar {
    background: #fff;
    left: 0px;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
.ham.opened > .bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.ham.opened > .bar:last-child {
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.nav-header {text-align: center}
.nav-header ul{list-style: none; padding: 0; margin: 0;}
.nav-header ul li {position: relative}
.nav-header a {padding: 15px; display: block; color: #fff; font-size:16px; text-decoration: none}
.child {display: none; background: cornflowerblue; text-align: left}
@media(min-width: 761px){
    .nav-header>ul>li {display: inline-block;}
    .child {position: absolute; top: 100%; width: 150%}
    .nav-header span {display: none}
}
@media(max-width: 760px){
    body.no_scroll {overflow: hidden;}
    .ham {display: block}
    .nav-header { position: absolute;
        width: 100%;
        left: -100%;
        margin-top: 0;
        z-index: 2;
        height: 100%;
        background: cornflowerblue;
        overflow-y: scroll;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;}
    .nav-header>ul {padding: 35px 15px 15px;}
    .nav-header a {display: block}
    .nav-header.active { left: 0;}
    .nav-header span {position: absolute; font-size: 13px; right: 0; top: 15px; cursor: pointer; color: red}
}

<nav> 
   <div class="container">
        <button class="ham nav"><span class="bar"></span><span class="bar"></span><span class="bar"></span></button>
        <div class="nav-header">
            <ul>
                <li class="parent_link"><span>open</span>
                    <a href="#" >Первый пункт</a>
                    <ul class="child">
                        <li>
                            <a href="#">Подпункт меню 1</a>
                        </li>
                        <li>
                            <a href="#">Подпункт меню 2</a>
                        </li>
                        <li>
                            <a href="#">Подпункт меню 3</a>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a href="#">Второй пункт</a>
                </li>
                <li class="">
                    <a href="#">Третий пункт</a>
                </li>
                <li class="parent_link"><span>open</span>
                    <a href="#" >Первый пункт</a>
                    <ul class="child">
                        <li>
                            <a href="#">Подпункт меню 1</a>
                        </li>
                        <li>
                            <a href="#">Подпункт меню 2</a>
                        </li>
                        <li>
                            <a href="#">Подпункт меню 3</a>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a href="#">Пятый пункт</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

$(document).ready(function () { 
    var $win_n = $(window).width();
    $('.ham').on('click', function () {
        var $btn = $(this);
        if(!$btn.hasClass('opened')){
            $('.nav-header').addClass('active');
            $('body').addClass('no_scroll');
            $('.ham').removeClass('closed');
            $('.ham').addClass('opened');
        } else {
            $('.nav-header').removeClass('active');
            $('body').removeClass('no_scroll');
            $('.ham').addClass('closed');
            $('.ham').removeClass('opened');
        }
    });
    if($win_n<=760){
        $('.parent_link span').click(function () {
            if($(this).parent().children('.child').css("display")=="none"){
                $('.child').hide('normal');
                $(this).parent().children('.child').show('normal');
                $('.parent_link').removeClass('active');
                $(this).parent().addClass('active');
            } else {
                $('.child').hide('normal');
                $('.parent_link').removeClass('active');
            }
        })
    } else {
        $('.parent_link').mouseenter(function () {
            $(this).children('.child').show('normal');
            $(this).addClass('active');
        });
        $('.parent_link').mouseleave(function () {
            $('.child').hide('normal');
            $('.parent_link').removeClass('active');
        });
    }
})