Javascript 响应导航条开关

我是一个网页设计的新手，为帮助我学习，我在一个个人项目\培训中工作了大约4个月

我已经越来越深入地了解了这一点，并花了数周时间试图使我所做的桌面网站具有响应性。然而，我正在努力让我的“移动”切换条正常工作，并且已经搜索了又搜索，但找不到问题的答案。我尝试过不同的方法，但都没有用

基本上，我现在吃的汉堡包一直落在菜单的底部，而不是留在导航栏里。如果我将它设置为绝对，这似乎解决了这个问题，那么我就无法在导航栏中正确定位它

此外，我还一直试图让汉堡从左侧滑入，并用向右滑动的汉堡填充大约70%的屏幕，同样没有效果。任何方法似乎都不起作用，我能得到的只是一个下拉列表。我怀疑我那乱七八糟的代码中有什么我不明白的地方。作为一名新手，我一直在尝试将我所读到的最佳实践结合起来，并意识到我的一些代码可能冗长，有点混乱，因此任何关于如何清理它的提示都将不胜感激

我一直在努力实现的总体想法是：

我已经将代码剥离到了最基本的部分，因为我尝试的任何东西都不起作用，这是一个JSFIDLE

HTML:

JQUERY：

  jQuery(document).ready(function() {
      jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
      });
  });

达莫， 您的代码正在运行，您只需使用以下HTML：

<div class="hamburgerWrapper">
      <div class="toggle-nav"><a href="#">Menu</a></div>
</div>

在这一页的底部。将其向上移动到顶部，如下所示：

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">
    <div class="hamburgerWrapper">
       <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
    <ul class="active">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li>
    <a href="MainPage.aspx">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>  
    <li>
    <a href="#">Menu 4</a>   
        <ul class="submenu">
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>
</nav>
</div>
</div>
</div>

那么它应该会起作用。

---

祝你好运

我可以使用CSS为菜单设置动画。移动设备上的导航幻灯片，单击按钮而不是加载DOM时添加类

.active

jQuery（文档）.ready（函数（）{
jQuery（'.toggle nav'）。单击（函数（e）{
jQuery（this.toggleClass（'active'）；
jQuery（'.menu ul'）.toggleClass（'active'）；
jQuery（'.menu'）.toggleClass（'active'）；
e、 预防默认值（）；
});
});
导入url（UndoHTML.css）；
//[至]新代码
#容器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：拉伸；
宽度：100%；
文本对齐：居中；
}
/*移动电话*/
/*导航菜单*/
.导航{
背景色：黑色；
}
navWrapper先生{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
弯曲方向：立柱；
柔性生长：1；
}
汉堡王{
左：0；
位置：绝对位置；
过渡：所有的1容易；
背景：#000；
宽度：100%；
}
.活跃的.汉堡说唱歌手{
左：200px；
过渡：所有的1容易；
}
/*水平菜单*/
.菜单{
柔性生长：1；
}
.菜单ul{
列表样式：无；
位置：固定；
左-70%；
过渡：所有的1容易；
背景：#000；
排名：0；
}
.菜单ul.active{
左：0；
过渡：所有的1容易；
}
李先生{
位置：相对位置；
字体大小：粗体；
边框底部：1px实心#b3c4e6；
}
.菜单ul li a{
文本对齐：居中；
边框底部：1px实心rgba（0,0,0,0.1）；
显示：块；
颜色：#fff；
填充：16px 16px 12px 16px；
边框底部：5px实心透明；
}
.菜单ul li a：悬停{
背景色：红色；
边框底部：5px实心#7EF300；
颜色：#FFDB00；
}
/*汉堡包*/
汉堡王{
显示器：flex；
柔性生长：1；
调整内容：灵活启动；
填充：10px；
}
.切换导航{
背景：线性梯度（至底部，#FFF 0%，#FFF 20%，透明20%，透明40%，#FFF 40%，#FFF 60%，透明60%，透明80%，#FFF 80%，#FFF 100%）；
光标：指针；
高度：24px；
过渡：不透明度。5s缓解；
宽度：32px；
颜色：白色；
显示：内联块；
}
.切换导航a{
显示：内联块；
颜色：#fff；
字体大小：粗体；
垫顶：2件；
垫底：2件；
左侧填充：60px；
右边填充：10px；
}
/*子菜单*/
.菜单ul li：悬停ul{
显示：无；
}
.子菜单{
显示：无；
位置：绝对位置；
背景色：黑色；
空白：nowrap；
宽度：100%；
列表样式类型：无；
}
.子菜单>li>a{
文本对齐：左对齐；
/*边框顶部：1px实心rgba（255,255,255,0.3）*/
边框底部：1px实心rgba（0,0,0,0.1）；
显示：块；
颜色：#fff；
填充：7px 16px 5px 16px；
边框底部：5px实心透明；
/*要偏移白色下划线，请悬停*/
}
.子菜单>li:悬停>a{
背景色：红色；
颜色：#FFDB00；
边框底部：5px实心#7EF300；
}
#内容层{
显示：无；
身高：100%；
溢出x：隐藏；
溢出y：自动；
位置：绝对位置；
右：0；
排名：0；
宽度：30%；
z指数：5；
}
/*中等屏幕*/
@所有介质和（最小宽度：600px）和（最大宽度：999px）{
.切换导航{
显示：无；
}
汉堡王{
显示：无；
}
navWrapper先生{
证明内容：中心；
宽度：100%；
保证金：自动；
}
.菜单{
柔性生长：1；
宽度：100%；
}
.菜单ul.active{
显示器：flex；
宽度：100%；
弯曲方向：行；
柔性包装：包装；
}
李先生{
边框底部：无；
}
.菜单ul li：类型的最后一个{
保证金：0；
}
.菜单ul li：悬停ul{
显示：块；
}
}
/*大屏幕*/
@全部和全部介质（最小宽度：1000px）{
navWrapper先生{
最大宽度：1366px；
宽度：100%；
保证金：自动；
}
.切换导航{
显示：无；
}
汉堡王{
显示：无；
}
.菜单{
柔性生长：1；
宽度：100%；
}
.菜单ul.active{
显示器：flex；
宽度：100%；
弯曲方向：行；
柔性包装：包装；
}
李先生{
边境机器人
<div class="hamburgerWrapper">
      <div class="toggle-nav"><a href="#">Menu</a></div>
</div>

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">
    <div class="hamburgerWrapper">
       <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
    <ul class="active">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li>
    <a href="MainPage.aspx">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>  
    <li>
    <a href="#">Menu 4</a>   
        <ul class="submenu">
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>
</nav>
</div>
</div>
</div>