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