我的 jQuery 代碼無法有效地打開和關閉移動菜單欄

Question

請問我需要導航欄（移動視圖）的幫助我想使用 jQuery 打開和關閉菜單。 這是我的第一個每 web 開發項目

https://github.com/alwayswantedtocode/my-first-web-dev-project

Answer 1

.toggle() 還不夠！

請改用刪除/添加 class。

$('.navigation').removeClass('').addClass('')

https://jsfiddle.net/drmtpocn/1/

Answer 2

我可以看到你在每個 function 上定義你的 $(Document).ready function，沒有必要考慮你將在其中運行大部分 JQuery 函數，所以你只能在項目開始時定義它. 然后，您將把其他功能僅放在該文檔中。准備好 function。

如果你想要一個簡單的方法來解決這個問題，你可以使用下面的代碼：

   $(document).ready(() => {

    $('.menu-Icon span').click(() => {
        $('.navigation').addClass('open');
        $(".navigation").removeClass('close');

    });
    
    $(".X-close").click(() => {
        $(".navigation").toggleClass('close');
    });
});

這將在您每次打開它時刪除“關閉”class，它會添加打開的 class，當您之后關閉菜單時，它會重新添加關閉的 class。

還有一個內置 JQuery function 的選項，這可能會使它看起來比僅僅出現好一點。

您可以將以下內容放入您的 JQuery

  $(document).ready(() => {

    $('.menu-Icon').click(() => {
        $('.navigation').slideDown();

     

    });
    
    $(".X-close").click(() => {
        $('.navigation').slideUp();
    });
})

;

並且您在第 304 行的 CSS 會更改，這是編輯后的代碼段。

@media only screen and (max-width:991px) /* Line 290 */
{
    .header .navigation{ 
        position: fixed;
        right:-250 ;/*initially zero*/
        width:250px;
        height: 100%;
        overflow-y: auto; 
        background-color: #3e5e75;
        /* opacity: 0.75; */
        top: 0;
        z-index: 1000;
        padding: 15px 0;
        transition: all 0.5s ease ;
       display: none; /*Changed element line 304*/
       /* Changed from visibility to display */
        
    }

有關 jQuery slideUP/slideDown 的更多詳細信息，請點擊以下鏈接:)

滑下