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