Javascript HTML、CSS和JQUERY不能一起工作

我正在尝试使用jQuery设置菜单的动画，使其在单击时从屏幕外进入页面。当我点击菜单按钮时，按钮只会高亮显示。它不起作用了，我错过了什么？代码如下：

HTML

JQUERY

var main = function() {

  $('.menuButton').click(function() {
$('.menu').animate({
  right: "10px"
}, 200);

  });
};


$(document).ready(main);

这是关于你的

#头
有一个负的
z索引
。它“隐藏”在主体后面，导致您无法实际单击
.menuButton

更长的解释：给菜单按钮一个比其父元素更高的
z-index
（在这种情况下，
#header
）没有任何效果-它仍然会与
#header
的其他子元素成功竞争，但它不会显示在
#headers
父元素或同级元素的顶部。
#标题
的
z索引
将是“主要”索引

另见：如注释中@ajp15243所述。

var main=function（）{
$（'.menuButton'）。单击（函数（）{
$（'.menu'）。设置动画({
右：“10px”}，200）；
});
};
$（文件）.ready（主）
#标题{
位置：相对位置；
背景色：#636363；
宽度：自动；
高度：106px；
z指数：0；
}
#标识{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：1；
}
menuButton先生{
位置：绝对位置；
右：10px；
顶部：20px；
z指数：5；
背景色：无；
光标：指针；
}
.菜单{
位置：绝对位置；
右：-300px；
顶部：-18px；
z指数：1；
宽度：250px；
高度：400px；
背景色：#636363；
列表样式类型：无；
边界半径：25px；
}
#梅努林克斯{
/*显示：内联*/
字体大小：15px；
颜色：白色；
字体大小：35px；
右边距：10px；
边缘顶部：20px；
背景色：无；
}

罗杰斯夫人数学

主页
数学乐趣
有用的链接
与我联系

document.write（jQuery.now（））；
这是正确的。可以给
#header
元素一个
z-index
的
0
：基本上就是您所指的。
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: -1;
}

#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}

.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 1;
background-color: none;
cursor: pointer;
}

.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}

#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}

var main = function() {

  $('.menuButton').click(function() {
$('.menu').animate({
  right: "10px"
}, 200);

  });
};


$(document).ready(main);