使用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

.offset()返回一个包含top和left属性的对象，因此您的代码永远不会工作，因为aside_menu.offset().right始终是未定义的。请参阅http://api.jquery.com/offset/

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

Answer 2

简单的事情在最大的阻力线之后，而不是jQuery，对于这样简单的事情，最好使用JS。此外，JS中的动画很笨拙，特别是在较弱的计算机和智能手机上，这会破坏用户体验。使用简单的JS和CSS可以更容易地做到这一点。也许我的代码不会对您有所帮助，但我希望能引导您走上正确的道路。Ps。尽量不要在类和属性和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>

​