javascript - 单击 ul 后浏览器展开时，响应式菜单消失

Question

我正在尝试创建一个响应式菜单(从 youtube 复制)。当我调整浏览器大小时，它工作正常，但是当我展开浏览器时，我遇到了一个错误，在我单击“ul”标签后，菜单没有出现。我需要刷新页面才能显示。 这是我的代码。

<div class="main_nav">
    <div class="nav_wrapper">
        <div class="media_nav">
            <span id="menu">Menu</span>
        </div>
        <div class="menu_container">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="#">Menu 7</a></li>
            </ul>
        </div>
    </div>
</div>
<style type="text/css">
    .main_nav{
    width: 100%;
}
.nav_wrapper{
    width: 84%;
    margin: auto;
    padding: 15px 0;
    position: relative;
}
.menu_container{
    margin:0;
    padding: 10px;
}
.menu_container ul{
    float: right;
}
.menu_container ul li{
    list-style: none;
    float: left;
    padding: 0 10px;
}
.menu_container ul li a{
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}
.menu_container ul li a:hover{
    opacity: .7;
}

.media_nav{
    position: absolute;
    right: 0;
    display: none;
}
.media_nav span:hover{
    cursor: pointer;
}


/* my meida query starts here */

@media screen and (min-width: 500px) and (max-width: 987px) {
    .nav_wrapper ul{
        display: none;
    }
    .nav_wrapper ul li{
        float: none;
        padding: 5px;   
    }
    div.nav-expanded{
        display: block;
    }
    .media_nav{
        display: block;
    }
}

</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").click(function(){
            $(".menu_container ul").slideToggle(400, function(){
                $(this).toggleClass("nav-expanded").css('display', '500');
            });
        });
    });
</script>

我怀疑我的jquery有问题。 单击事件后，我尝试展开它，但 float 到左侧的菜单没有显示，页面需要刷新。 希望你能帮我。谢谢!

Answer 1

您不需要 .css() 函数:

http://jsfiddle.net/94nx8sgu/

$(document).ready(function(){
    $("#menu").click(function(){
        $(".menu_container ul").slideToggle(400, function(){
            $(this).toggleClass("nav-expanded");
        });
    });
});