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() returns 包含属性 top 和 left 的对象，因此您的代码将永远无法运行，因为 aside_menu.offset().right 始终未定义。参见 http://api.jquery.com/offset/

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

Answer 2

最大阻力线之后的简单的东西，而不是jQuery，这么简单的东西还是用JS比较好。此外，JS 中的动画很笨拙，尤其是在较弱的 com-puter 和智能手机上，这破坏了用户体验。用简单的 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>

jQuery 的导航隐藏菜单

navigation hide menu with jQuery

html

javascript

css

jquery

menu