навигация скрыть меню с помощью 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. Возможно, мой код не поможет вам, но я надеюсь, что вы на правильном пути. Ps. Старайтесь не использовать: «_» (подчеркивание) в классах, атрибутах и ​​идентификаторах, потому что это с точки зрения 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>

Answer 2

.offset() возвращает объект, содержащий свойства top и left, поэтому ваш код никогда не будет работать, потому что aside_menu.offset().right всегда неопределен. Смотри http://api.jquery.com/offset/

Вы должны использовать aside_menu.offset().left, а затем найти правильные значения для использования в условии if в соответствии с макетом вашей страницы.