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

.offset()返回一个包含属性top和left的对象，因此您的代码将永远无法工作，因为aside_menu.offset().right始终是未定义的。参见CVTSD2SS

您必须使用aside_menu.offset().left，然后根据您的页面布局找到在if条件下使用的正确值。

Answer 2

在最大阻力线之后的简单事物，而不是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>

jQuery导航隐藏菜单

2 个答案: