jquery菜单回到正常状态时不起作用

Question

我正在构建一个带有jquery的侧边栏菜单，它在移动设备上表现不同。 到目前为止，这么好，但是当我在移动设备上测试并恢复到完整尺寸时，它的行为与移动版本相同。当我以完整的窗口大小开始时，它工作正常。 我试图解决它一段时间了，但我错过了一些东西（很可能是简单的东西）。 所以，如果你们能以正确的方式指出我，我将非常感激。 最好的问候。

$(document).ready(function () {
    $('ul li').click(function () {
        var tab_id = $(this).attr('data-tab'); // get the id through data-tab

        $('ul li').removeClass('active');
        $('.content').removeClass('current');

        $(this).addClass('active');
        $("#" + tab_id).addClass('current');

         $(window).resize(function() {
        if ($(window).width() <= 600) { // When in small screens animate slide
            $('div.content').removeClass('current'); // remove initial class
                $('ul li').click(function(){
                        if ($('.content').is(':hidden')) {
                           
                            $('.content').show('slide',{direction:'right'},500);
                        }
                    })
            $('.back').click(function () { // back button animate close slide
                $('.content').hide('slide', {direction: 'right'}, 500);
            })
        }
    })
    })
   
});

    

body {
    width: 100%;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: dimgrey;
}


/* HEADER */

header {
    width: 100%;
    height: auto;
    padding: 20px 10px;
    border-bottom: solid 1px #464646;
}

header div {
    display: inline;
    font-size: 1rem;
    background-color: #464646;
    color: white;
    padding: 0.7rem 3rem;
}


/* CONTAINER */

.container {
    width: 60%;
    margin: 0 auto;
}

.container article {
    float: left;
    width: 70%;
}

.container article ul {
    display: inline;
    list-style: none;
}

.container article ul li {
    float: left;
    margin: 4px;
}


/* ASIDE */


/* NAV */

aside {
    float: left;
    width: 30%;
}

aside nav {
    text-align: center;
    justify-content: center;
}

aside nav ul {
    display: inline-block;
    list-style: none;
    padding: 0;
}

aside nav ul li {
    display: inline-block;
    margin: 2px 0px;
    text-align: center;
    font-size: 10px;
    padding: 6px 6px 12px 6px;
    color: black;
    cursor: pointer;
}

.active {
    color: black;
    border-bottom: solid 1px black;
}

aside nav ul li img {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    margin: 4px auto 0 auto;
}

aside nav ul li p {
    margin: 0;
}

aside div {
    height: 100vh;
    overflow-x: scroll;
    padding: 12px;
    margin-left: 2px;
}

.content {
    display: none;
}

.content.current {
    display: inline-block;
}

aside .content img {
    width: 100%;
    height: auto;
}

aside .content label {
    font-size: 12px;
}

.content p {
    font-size: 14px;
    text-decoration: underline;
}

div .back {
    display: none;
    margin: 0px 0px;
    height: auto;
    font-size: 30px;
}

div .back i {
    font-size: 40px;
}


/* MOBILE */

@media only screen and (max-width: 700px) {
    html,
    body {
        width: 100vw;
        margin: 0px;
        padding: 2px;
        overflow-x: hidden;
    }
    header {
        overflow-x: hidden;
        width: 80vw;
        height: auto;
        border-bottom: solid 1px #464646;
    }
    .container {
        width: 90%;
        margin: 0 0 0 2px;
    }
    .container article {
        width: 90%;
        margin: 0 0 0 2px;
    }
    aside nav {
        position: fixed;
        right: 5%;
        top: 10%;
        background: white;
    }
    aside nav ul li {
        display: block;
        width: 2rem;
        height: 2rem;
        margin: 0;
    }
    aside nav ul li p {
        margin: 0;
        display: none;
    }
    aside nav ul li.active {
        color: black;
        border-bottom: 0;
    }
    aside div.content {
        width: 90%;
        padding: 2px;
        height: auto;
    }
    aside div.content.current {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
    }
    div .back {
        display: inline;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Atypon Challenge 2</title>
</head>

<body>
    <!-- HEADER -->
    <header role="header" aria-label="header">
        <div aria-label="logo">LOGO</div>
    </header>

    <!--CONTENT-->
    <div class="container" role="container" aria-label="container">
        <article role="content" aria-label="content">
            <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h1>
            <ul>
                <li><a href="#" target="_blank">Author 1</a>,</li>
                <li><a href="#" target="_blank">Author 2</a>,</li>
                <li><a href="#" target="_blank">Author 3</a></li>
            </ul>

            <h3>Abstract</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sagittis massa. Duis eu magna id magna malesuada
                aliquam. Nulla egestas varius lorem quis varius. Sed a justo a orci ultrices tempor. Phasellus vestibulum
                rutrum interdum. Interdum et malesuada <a href="#" target="_blank">fames</a> ac ante ipsum primis in</p>

            <h3>Introduction</h3>
            <p>Aenean non egestas metus. Mauris dignissim tellus in augue porttitor, et ultrices nisl ultricies. In in pulvinar
                magna. Aenean ac lorem velit. Nullam quis erat vel leo porttitor rutrum. Pellentesque urna orci, tempor blandit
                ligula pharetra, ornare venenatis metus. Duis tristique congue ante ut laoreet. Mauris facilisis massa non
                est efficitur facilisis. Donec eros risus, tempor mattis elementum non, accumsan dapibus enim. Sed quis libero
                elit. Cras laoreet libero dui, sed dictum urna vehicula bibendum. Vivamus iaculis mollis pulvinar. Curabitur
                ac accumsan nunc. Aenean id tellus nec ante vulputate vulputate. In auctor facilisis lectus fringilla blandit.
                Nullam tempor dolor tincidunt, tristique dui sit amet, porttitor metus. Nullam rhoncus aliquam nulla, eu
                dictum lacus <a href="#" target="_blank">posuere</a> id. Curabitur ut tellus et elit lobortis imus. Cras
                bibendum bibendum erat sed maximus. Donec non mauris varius, bibendum ante at, viverra lacus. Aliquam non
                pharetra est, vitae egestas tellus. Suspendisse ac sem est. Nulla facilisi. Vivamus ndimentum rhoncus enim
                et mattis. Suspendisse pellentesque justo non justo cursus, et fringilla tortor posuere. Nam sit amet efficitur
                purus. Nulla pharetra, augue nec viverra lacinia, diam diam eleifend lacus, at vulputate diam mauris sodales
                odio. Fusce aliquam id augue vitae feugiat. Suspendisse vitae laoreet enim. Aliquam risus dui, gravida eget
                velit ac, sagittis dictum mi. Sed non massa elit.</p>
        </article>
        <aside>

            <!-- MENU -->
            <nav id="tabs" role="navigation" aria-label="menu">
                <ul class="tabs">
                    <li class="active" tabindex="1" data-tab="tab-1"><img src="img/figures.svg" alt="figures selector">
                        <p>Figures</p>
                    </li>
                    <li tabindex="2" data-tab="tab-2"><img src="img/references.svg" alt="references selector">
                        <p>References</p>
                    </li>
                    <li tabindex="3" data-tab="tab-3"><img src="img/related.svg" alt="related selector">
                        <p>Related</p>
                    </li>
                    <li tabindex="4" data-tab="tab-4"><img src="img/info.svg" alt="details selector">
                        <p>Details</p>
                    </li>
                </ul>
            </nav>

            <!-- CONTENT -->

            <!-- FIGURES -->
            <div id="tab-1" role="content" aria-label="figures content" class="content current">
                <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</div>
                <img src="img/figure1.jpg" alt="figure 1" id="fig1" value="fig1">
                <label for="fig1">Fig. 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
                <hr/>
                <img src="img/figure2.png" alt="figure 2" id="fig2" value="fig2">
                <label for="fig2">Fig. 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
                <hr/>
                <img src="img/figure3.png" alt="figure 3" id="fig3" value="fig3">
                <label for="fig3">Fig. 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
                <hr/>
            </div>

            <!-- REFERENCES -->

            <div id="tab-2" role="content" aria-label="references content" class="content">
                <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</div>
                <h3>Lorem</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <h3>Lorem</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <!-- RELATED -->
            <div id="tab-3" role="content" aria-label="related content" class="content">
                <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</div>
                <h3>Title</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <h3>Title</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <h3>Competing interests</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>

            <!-- DETAILS -->
            <div id="tab-4" role="content" aria-label="details content" class="content">
                <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</div>
                <h3>Title</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <h3>Title</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <h3>Title</h3>
                <hr>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>
        </aside>

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="js/script.js"></script>
</body>

</html>