javascript - 使用 jQuery 混淆响应式菜单

Question

我的响应菜单在移动菜单中运行良好，但我遇到一个问题，即当我将浏览器调整回大屏幕尺寸时。移动菜单仍然出现。有人知道为什么吗？

这是我的代码:

CSS

.main-navigation ul {
    z-index: 999;
    float: right;
    font-size: 1rem;
}

.main-navigation ul>li {
    float: left;
    position: relative;
}

.main-navigation ul>li a {
    color: #555;
    height: 42px;
    line-height: 42px;
    margin-left: .5em;
    padding-right: 1em;
    position: relative;
}

.main-navigation ul>li ul {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-transition: opacity .1s ease-in;
    -moz-transition: opacity .1s ease-in;
    -o-transition: opacity .1s ease-in;
    transition: opacity .1s ease-in;
    position: absolute;
    background: white;
    left: -1em;
}

.main-navigation ul>li ul li {
    float: none;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    background: #f9f9f9;
}

.main-navigation ul>li ul li a {
    padding: 0 1em;
    margin-right: 0;
    font-weight: normal;
}

.main-navigation ul>li ul li a::before {
    content: '';
}

.main-navigation ul>li ul li ul {
    border-top: 1px solid #fff;
    position: absolute;
    left: 100%;
    top: -1px;
    height: 21px;
    line-height: 21px;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-transition: opacity .1s ease-in;
    -moz-transition: opacity .1s ease-in;
    -o-transition: opacity .1s ease-in;
    transition: opacity .1s ease-in;
}

.main-navigation ul>li:hover>ul {
    opacity: 10;
    filter: alpha(opacity=100);
    visibility: visible;
}

.main-navigation ul>li:hover>a {
    color: #e74c3c;
}

@media only screen and (max-width:479px) {


.main-navigation ul {
    z-index: 999;
    float: right;
    font-size: 1rem;
}

.main-navigation ul>li {
    float: left;
    position: relative;
}

.main-navigation ul>li a {
    color: #555;
    height: 42px;
    line-height: 42px;
    margin-left: .5em;
    padding-right: 1em;
    position: relative;
}

.main-navigation ul>li ul {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-transition: opacity .1s ease-in;
    -moz-transition: opacity .1s ease-in;
    -o-transition: opacity .1s ease-in;
    transition: opacity .1s ease-in;
    position: absolute;
    background: white;
    left: -1em;
}

.main-navigation ul>li ul li {
    float: none;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    background: #f9f9f9;
}

.main-navigation ul>li ul li a {
    padding: 0 1em;
    margin-right: 0;
    font-weight: normal;
}

.main-navigation ul>li ul li a::before {
    content: '';
}

.main-navigation ul>li ul li ul {
    border-top: 1px solid #fff;
    position: absolute;
    left: 100%;
    top: -1px;
    height: 21px;
    line-height: 21px;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-transition: opacity .1s ease-in;
    -moz-transition: opacity .1s ease-in;
    -o-transition: opacity .1s ease-in;
    transition: opacity .1s ease-in;
}

.main-navigation ul>li:hover ul {
    opacity: 10;
    filter: alpha(opacity=100);
    visibility: visible;
}

.main-navigation ul>li:hover>a {
    color: #e74c3c;
}

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>

jQuery :

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();
    });

Answer 1

没有隐藏菜单的代码。代替 slideToggle，我建议添加/删除像“closed”和“open”这样的类，并将 mymenu.closed 设置为 display:none在媒体查询中将 mymenu.open 设置为 display:block