使用 jQuery 导航隐藏菜单

Question

我用 jquery 构建了一个导航菜单，当我点击菜单图标时它会打开但是当我再次点击菜单图标时它不会关闭这是 html 代码：<aside class="aside_menu">        <span class="arrow"></span>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div></aside>这是 jquery 代码：$(document).ready(function () {$(".aside_menu .arrow").click(function () {    var aside_menu = $(this).parent();    if (aside_menu.offset().right === 0)        aside_menu.animate({right: "-200px"})    else        aside_menu.animate({right: "0px"})})})菜单隐藏在页面右侧，只显示菜单图标

Answer 1

简单的事情在最大阻力线之后，与其说jQuery，不如用JS做这种简单的事情。此外，JS 中的动画很笨拙，尤其是在较弱的计算机和智能手机上，这会破坏用户体验。使用简单的 JS 和 CSS 更容易做到。可能我的代码不会帮助你，但我希望能引导你走上正确的道路。附言。尽量不要在类和属性和 id 中使用：“_”（下划线），因为这是在 SEO 方面，它是对膝盖的打击，更好的选择是：“-”（破折号）。

var menu = document.querySelector("#menu");

var button = document.querySelector("#button");

function toggleMenu(){

  if(!menu.classList.contains("fade")){

    menu.classList.add("fade");

  }else{

    menu.classList.remove("fade");

  }

}

button.addEventListener("click", toggleMenu);

body{

  margin: 0;

  display: flex;

  }

#menu{

  background: pink;

  width: 70px;

  height: 100%;

  text-align: center;

  transition: 0.34s;

  }

#button{

  height: 30px;

  transition: 0.34s;

  }

.fade{

  width: 0 !important;

  }

.fade *{

  display: none;

}

<aside id="menu" class="fade">

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

</aside>

<button id="button">

Button

</button>