無法讓我的漢堡包菜單正常工作

-1

我需要一些幫助。我正在嘗試爲我的網站製作一個漢堡包菜單，但由於某些原因，我無法弄清楚，它不起作用。這裏的HTML，CSS和我寫了一首歌codepen.io:- https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW 這裏的JavaScript代碼JavaScript代碼： -無法讓我的漢堡包菜單正常工作

$(document).ready(function(){ 
    $('Menu').click(function(){ 
    $(this).toggleClass('Trigger'); 
    }); 
    });

從代碼，第一跨度欄應通過後旋轉135度動畫我點擊它，但它不是。

來源

2017-04-18 Arko991

什麼是「不工作」是什麼意思？你有錯誤嗎？此外，您需要在此處發佈相關代碼，而不是在筆中。 –

通常，在嘗試使用它之前需要加載jQuery * –

您的代碼筆抱怨沒有定義'$'。你有沒有鏈接到'jQuery'？ –

你的CSS樣式被打破，
你沒有的jQuery（通過設置添加）
$('Menu')這是jQuery的其他說，你選擇的ID，這樣應該是$('#Menu')

檢查該鏈接的工作例如，固定jQuery的，JS和CSS：

https://codepen.io/hdl881127/pen/wdKZVj

個

固定CSS：

#Menu{ 
    position:relative; 
    margin-top:20px; 
    margin-left:20px; 
    display:block; 
    height:50px; 
    cursor: pointer; 
    width:50px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
} 

#Menu span{ 
    position:absolute; 
    background:orange; 
    display:block; 
    height: 6px; 
    width: 100%; 
    border-radius:50px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
} 
#Menu span:nth-child(1){ 
    top:0px; 
} 
#Menu span:nth-child(2){ 
    top:18px; 
} 
#Menu span:nth-child(3){ 
    top:36px; 
} 

#Menu.Trigger span:nth-child(1){ 
    top: 18px; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
} 

#Menu.Trigger span:nth-child(2){ 
    top: 18px; 
    -webkit-transform: rotate(225deg); 
    -moz-transform: rotate(225deg); 
    -o-transform: rotate(225deg); 
    transform: rotate(225deg); 
} 

#Menu.Trigger span:nth-child(3){ 
    top: 18px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
}

來源

2017-04-18 22:04:21

不錯的一個。但是我可否知道，內容的含義=「」;正如你在css中寫的那樣？ – Arko991

@ Arko991哦，我的壞，粘貼錯誤的代碼。現在檢查更新的一個 –

@ Arko991我剛剛檢查了你的代碼筆，好像你更新了一下。我發現這個CSS'＃Menu.Trigger跨度：nth-child（3）{top：25px; ...'將其更改爲'18px'並且它是完美的= D –

使用前使用Jquery和JQuery UI。並且$('Menu')菜單不是標籤，但它是根據您的代碼筆的div的ID。它必須是$('#Menu')。

來源

2017-04-18 18:25:52

請執行這些步驟。

轉到您的代碼筆
點擊在JS部分提供的設置圖標。
通過點擊位於對話框右下角的添加其他資源按鈕，添加jQuery參考（https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js）。
在你的javascript中，你正在使用$（'Menu'）。這實際上是在搜索名爲Menu的標籤。將其更改爲$（'＃Menu'）。正如你想瞄準的ID。
它會工作得很好。

來源

2017-04-18 21:14:24

無法讓我的漢堡包菜單正常工作

回答

相關問題