HTML, CSS, JQUERY不能一起工作

HTML, CSS, JQUERY not working together

本文关键字：一起 工作 不能 JQUERY CSS HTML      更新时间：2023-09-26

我正在尝试使用jQuery动画菜单，使其在点击时从屏幕外进入页面。当我点击菜单按钮时，按钮只是高亮显示。不管用，我错过了什么?下面是代码:

HTML 

<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
    <a href="http://www.mrsrogersmath.net"><img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg"></a>
    <img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
    <ul class="menu">
        <li id="menuLinks">Home </li>
        <li id="menuLinks">Math Fun </li>
        <li id="menuLinks">Helpful Links </li>
        <li id="menuLinks">Contact Me </li>
    </ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
CSS 

#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;
}
JQUERY 

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

$(document).ready(main);

这是关于你的#header有负的z-index。它被"隐藏"在身体后面，导致你无法真正点击.menuButton。

更长的解释:给菜单按钮一个比它的父元素(在这种情况下，#header)更高的z-index没有任何影响-它仍然会与#header的其他后代成功竞争，但它不会显示在 #headers父元素或兄弟元素的顶部。#header的z-index将是"主导"的。

参见:堆叠上下文，在评论中由@ajp15243引用。

var main = function() {
  $('.menuButton').click(function() {
    $('.menu').animate({
        right: "10px"}, 200);
    });
  };
$(document).ready(main);
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: 0;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 5;
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;
}
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
    <a href="http://www.mrsrogersmath.net"><img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg"></a>
    <img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
    <ul class="menu">
        <li id="menuLinks">Home </li>
        <li id="menuLinks">Math Fun </li>
        <li id="menuLinks">Helpful Links </li>
        <li id="menuLinks">Contact Me </li>
    </ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>

相关文章：