如何使用jQuery实现响应式导航栏，点击#nav-icon1同步触发菜单下拉

解决方案 #

你只需要按以下3步调整代码即可实现需求：

1. 修改JavaScript逻辑

在点击事件中同步切换导航菜单的展开状态类，修改后代码如下：

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        // 切换导航图标动画
        $(this).toggleClass('open');
        // 同步切换导航菜单的展开类
        $('.nav-links').toggleClass('menu-open');
    });
});

2. 修改HTML默认类

你当前的HTML中导航菜单默认加了open类，会导致移动端加载时默认展开，需要去掉默认的open类：

<!-- 把原来的 -->
<ul class="nav-links open">
<!-- 修改为 -->
<ul class="nav-links">

3. 调整CSS优先级避免类冲突

原来的全局open类会和导航图标的动画类混用，调整媒体查询内的菜单显示规则：

/* 把原来的 */
.open{
    display: flex;
}
/* 修改为 */
.nav-links.menu-open {
    display: flex;
}

可选优化（平滑动画） #

如果想要更顺滑的下拉收起效果，不要用display切换，可以改为用max-height实现过渡动画，修改媒体查询内的.nav-links相关样式：

.nav-links{
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}
.nav-links.menu-open {
    /* 赋值为大于菜单实际高度的任意值即可 */
    max-height: 1000px;
}

内容的提问来源于stack exchange，提问作者james wong