带有许多切换器类的Javascript点击功能

Question

好吧，这是一个有点复杂的问题，但请耐心听我说。 基本上，当我单击切换按钮时，左侧有一个滑出导航栏。

此滑出导航将页面内容在滑出时推向右侧，然后在关闭导航时返回。这是我的CSS：

//show nav    
.left-nav.show{
  width: 240px;
}
.maincontent.show{
  margin-left: 300px;
  transition: .5s;
}//move content to the right

//hide nav    
.left-nav.hide{
  width: 0px;
}
.maincontent.hide{
  margin-left: 100px;
}//move content back to left

这是我的 JavaScript：

 $(document).ready(function(){
  $("#toggleSidebar").click(function(){

    $(".left-nav").toggleClass("show");
    $(".maincontent").toggleClass("show");

    $(".left-nav").toggleClass("hide");
    $(".maincontent").toggleClass("hide");

  });
});

我是 javascript 新手，想知道 javascript 语法是否正确（即一键功能内有许多类切换器）？或者用 if else 语句代替会更好。任何关于更好的方法来编写此函数的想法都会很棒。非常感谢！

Answer 1

你的代码非常好。但您可以使用 CSS

transform

或

translateX

来归档滑动效果，而不是直接操作边距。会更顺利。提前，你可以使用像 bootstrap 或 tailwind 这样的 javascript 框架，但如果你正在学习纯 CSS 和 javascript，你可以跳过这个。