Javascript 对jQuery的响应菜单感到困惑

我的Responseve菜单在移动菜单中运行良好，但我有一个问题，当我将浏览器重新调整为大屏幕时。移动菜单仍然出现。有人知道为什么吗

这是我的密码：

CSS

}

HTML:

<a href="#" id="rwd-nav-btn" >&#9776;</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->

<nav class="main-navigation">

                            <ul class="fr">
                                <li><a href="">home</a></li>
                                <li><a href="">articles</a></li>
                                <li><a href="">portfolio</a></li>
                                <li>
                                    <a href="">dropdown</a>

                                    <ul>
                                        <li><a href="">home</a></li>
                                        <li><a href="">articles</a></li>
                                        <li><a href="">portfolio</a></li>
                                        <li>
                                            <a href="">dropdown</a>

                                            <ul>
                                                <li><a href="">home</a></li>
                                                <li><a href="">articles</a></li>
                                                <li><a href="">portfolio</a></li>
                                                <li>
                                                    <a href="">dropdown</a>
                                                </li>
                                                <li><a href="">about</a></li>
                                                <li><a href="">contact</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">about</a></li>
                                        <li><a href="">contact</a></li>
                            </ul>

                        </li>
                        <li><a href="">about</a></li>
                        <li><a href="">contact</a></li>
                    </ul>   
                    </nav>

---

没有隐藏菜单的代码。我建议添加/删除像“closed”和“open”这样的类，并设置

mymenu，而不是
slideToggle
。closed

到

display:none

并在媒体查询集中

mymenu。open

到

display:block
您既没有发布css媒体查询，也没有发布相应的js代码。在提供的代码中，我没有看到任何在浏览器屏幕更改时激活的代码部分。您应该在调整大小时使用javascript，或者使用CSS媒体过滤器在不同的屏幕大小上过滤CSS。您可以创建一个JSFIDLE示例吗。我不明白这段代码是如何生成响应菜单的。对不起，各位。我忘了添加媒体查询。现在我已经编辑了。
<a href="#" id="rwd-nav-btn" >&#9776;</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->

<nav class="main-navigation">

                            <ul class="fr">
                                <li><a href="">home</a></li>
                                <li><a href="">articles</a></li>
                                <li><a href="">portfolio</a></li>
                                <li>
                                    <a href="">dropdown</a>

                                    <ul>
                                        <li><a href="">home</a></li>
                                        <li><a href="">articles</a></li>
                                        <li><a href="">portfolio</a></li>
                                        <li>
                                            <a href="">dropdown</a>

                                            <ul>
                                                <li><a href="">home</a></li>
                                                <li><a href="">articles</a></li>
                                                <li><a href="">portfolio</a></li>
                                                <li>
                                                    <a href="">dropdown</a>
                                                </li>
                                                <li><a href="">about</a></li>
                                                <li><a href="">contact</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">about</a></li>
                                        <li><a href="">contact</a></li>
                            </ul>

                        </li>
                        <li><a href="">about</a></li>
                        <li><a href="">contact</a></li>
                    </ul>   
                    </nav>

jQuery(document).ready(function(){
    jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');


    jQuery('#rwd-nav-btn').click(function(event){
        event.preventDefault();
        jQuery('.rwd-nav').slideToggle();
    });