无法让我的汉堡包菜单正常工作

-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

无法让我的汉堡包菜单正常工作

回答

相关问题