Javascript 如何使用Jquery切换元素

我正在尝试使用HTML、CSS和JS创建导航栏。但是，我在尝试切换汉堡时遇到了一个问题，因此当您在幻灯片菜单滑出时单击汉堡，当您再次单击汉堡时，它会隐藏幻灯片菜单

为此，我创建了两个函数，并调用

opennav

函数inline

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

@导入url（'https://fonts.googleapis.com/css?family=Rubik');
身体{
保证金：0；
字体系列：“Rubik”，无衬线
}
托普纳夫先生{
位置：相对位置；
溢出：隐藏；
背景色：#122B3C；
高度：65px；
}
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav以a为中心{
浮动：无；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.右上导航{
浮动：对；
}
.汉堡包{
显示：内联块；
光标：指针；
位置：固定；
z指数：999；
}
.家庭汉堡{
位置：静态；
}
.导航中心{
位置：绝对位置；
左：48%；
宽度：40px；
左边距：-20px；
/*将图像的宽度减半*/
}
多克先生{
位置：固定！重要；
排名：0；
}
.bar1，
.bar2，
.bar3{
宽度：40px；
高度：3倍；
背景色：#ffffff；
边际：7px0；
过渡：0.4s；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#304C58；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 16px；
文字装饰：无；
字体大小：25px；
颜色：#122B3C；
显示：块；
过渡：0.3s；
文本转换：大写；
字号：600；
边缘底部：10px；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
3@媒体屏幕和（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}

具有居中和右对齐链接的响应式顶部导航
调整浏览器窗口的大小以查看响应效果

我使用了javascript切换方法

将您的

openNav（）

更改为

toggleNav（）

仍然以相同的元素为目标

function toggleNav() {
    document.getElementById("mySidenav").classList.toggle("navWidth");
}

我还为宽度添加了类

.navWidth {width: 350px;}

---

您不必为此使用jQuery。您当前的普通JS逻辑可以很容易地进行修改，以使其按您的要求工作

首先，不要使用内联事件处理程序或CSS，两者都是不好的做法。相反，请使用不引人注目的事件处理程序。然后，您可以创建一个事件处理程序，通过切换元素上的CSS类来打开和关闭菜单，该类在元素上设置所需的

宽度。试试这个：


document.getElementById（'toggle'）.addEventListener（'click'，function（）{
document.getElementById（“mySidenav”）.classList.toggle（'open'）；
});
@导入url（'https://fonts.googleapis.com/css?family=Rubik');
身体{
保证金：0；
字体系列：“Rubik”，无衬线
}
托普纳夫先生{
位置：相对位置；
溢出：隐藏；
背景色：#122B3C；
高度：65px；
}
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav以a为中心{
浮动：无；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.右上导航{
浮动：对；
}
.汉堡包{
显示：内联块；
光标：指针；
位置：固定；
z指数：999；
}
.家庭汉堡{
位置：静态；
}
.导航中心{
位置：绝对位置；
左：48%；
宽度：40px；
左边距：-20px；
/*将图像的宽度减半*/
}
多克先生{
位置：固定！重要；
排名：0；
}
.bar1，
.bar2，
.bar3{
宽度：40px；
高度：3倍；
背景色：#ffffff；
边际：7px0；
过渡：0.4s；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#304C58；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.sidenav.open{
宽度：250px；
}
.侧导航a{
填充：8px 8px 8px 16px；
文字装饰：无；
字体大小：25px；
颜色：#122B3C；
显示：块；
过渡：0.3s；
文本转换：大写；
字号：600；
边缘底部：10px；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
3@媒体屏幕和（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}

具有居中和右对齐链接的响应式顶部导航
调整浏览器窗口的大小以查看响应效果

您只需使用此

在css文件中

.toggleClsss{
  width:250px !important;
}

在Js文件中

$(document).ready(function(){
    $(".hamburger").click(function(){       
         $('#mySidenav').toggleClass('toggleClsss');
    });
});

尽量不要使用
！重要信息
。而是加强选择元素的方式。将来
！重要信息
可能会导致您和处理代码的任何其他人出现许多问题。当然，但有时我们需要添加重要属性以正确覆盖旧属性。有时，当然，但这应该是最后的选择。提高选择器优先级是目前为止更好的方法。@VishnuChauhan如果你的标记很好，你就永远不需要使用它。可以更改选择图元的方式。让它更强大。@Gezzasa是的，当然，如果有帮助，请选择一个答案