Question

我需要一些帮助。我正在尝试为我的网站制作一个汉堡包菜单但由于某些我无法弄清楚的原因，它不起作用。这是我在codepen.io中写的HTML，CSS和javascript代码:- https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW 这是javascript代码： -

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

从代码开始，第一个跨度栏应该在点击它后旋转135度进行动画处理，但事实并非如此。

Answer 1

使用前使用Jquery和JQuery UI。并且$('Menu')菜单不是标记，但根据您的代码笔，它是div的ID。它必须是$('#Menu')。

Answer 2

请执行以下步骤。

转到您的密码笔
点击JS部分中提供的设置图标。
点击对话框右下角的添加其他资源按钮，添加jquery引用（ https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js ）。
在您的javascript中，您使用的是$（'菜单'）。这实际上是在搜索名为Menu的标签。将其更改为$（'＃Menu'）。如您想要定位到ID。
它会完美无缺。

Answer 3

你的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);
}

无法让我的汉堡包菜单起作用

3 个答案: