因此，我已经编写了所有 HTML，并为将用作主体和滑入式菜单的两个不同面板分配了 ID。但是当我添加 jQuery 时，它似乎没有响应。这适用于 Code Academy，但不适用于其他任何东西。
HTML:
<body>
<div ID="menu">
<div ID="exit">
<img src="http://www.thaddius.net/mems/hvit.jpg"/>
</div>
<ul>
<li><a ID="Links" href="http://www.thaddius.net/soup.webm/">Suppe, ja?</a></li>
<li><a ID="Links" href="http://www.thaddius.net/skjermavbildninger">Skjermdump?</a></li>
<li><a ID="Links" href="https://www.youtube.com/watch?v=MC0hV3dea9g">Gotta go fast!</a></li>
<li><a ID="Links" href="http://www.frankrobert.no">Men, Flørenes?</a></li>
<li><a ID="Links" href="http://www.mjaavatten.no/">Men, Mjaavatten?</a></li>
<li><a ID="Links" href="http://www.nittenbokstaverlang.com/">Men, Kristian?</a></li>
</ul>
<img src="http://www.thaddius.net/mems/longlast.jpg"
</div></div>
<div ID="body">
<div ID="open">
<img src="http://www.thaddius.net/mems/hvit.jpg"/>
MENU
</div>
</div>
<script src="script.js"></script>
</body>
CSS:
#Links:hover{
text-decoration: none;
background-color: red;
font-size: 110%;
}
#Links:link{
font-weight: bold;
text-decoration: none;
color: white;
}
#Links:visited {
text-decoration: none;
font-weight: bold;
color: white;
}
#menu {
background-color: gray;
padding: 8px;
left: -288px;
height: 100%;
position: fixed;
width: 272px;
}
li {
border-bottom: 1px solid black;
font-family: Comic sans MS;
margin: left;
}
#exit {
cursor: pointer
}
#open {
display:inline-block;
cursor: pointer;
color: white;
font-size: 30px;
}
body {
background-color: black;
}
JS:
var main = function() {
$('#open').click(function(){
$('#menu').animate({left: '0px'}, 400);
$('body').animate({left: '288px'}, 400);
});
$('#exit').click(function(){
$('#menu').animate({left:'-288px'}, 400);
$('body').animate({left:'0px'},400);
});
}
$(document).ready(main);
最佳答案
好吧，让我们开始吧。
首先在您的 head 标记中包含 jQuery 的 CDN 版本:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
因此，首先您需要开始合规并删除链接上的这些相同 ID。您甚至不需要属性来使用 CSS 定位这些链接。将 #Links 替换为 #menu li a。这不会影响性能；毕竟 CSS 选择器仍然非常快。
HTML
<div id="menu">
<div id="exit">
<img src="http://www.thaddius.net/mems/hvit.jpg"/>
</div>
<ul>
<li><a href="http://www.thaddius.net/soup.webm/">Suppe, ja?</a></li>
<li><a href="http://www.thaddius.net/skjermavbildninger">Skjermdump?</a></li>
<li><a href="https://www.youtube.com/watch?v=MC0hV3dea9g">Gotta go fast!</a></li>
<li><a href="http://www.frankrobert.no">Men, Flørenes?</a></li>
<li><a href="http://www.mjaavatten.no/">Men, Mjaavatten?</a></li>
<li><a href="http://www.nittenbokstaverlang.com/">Men, Kristian?</a></li>
</ul>
<img src="http://www.thaddius.net/mems/longlast.jpg" />
</div>
<div id="body">
<div id="open">
<img src="http://www.thaddius.net/mems/hvit.jpg" />
MENU
</div>
</div>
CSS
#menu li a:hover{
text-decoration: none;
background-color: red;
font-size: 110%;
}
#menu li a:link{
font-weight: bold;
text-decoration: none;
color: white;
}
#menu li a:visited {
text-decoration: none;
font-weight: bold;
color: white;
}
#menu {
background-color: gray;
padding: 8px;
left: -288px;
height: 100%;
position: fixed;
width: 272px;
}
#menu li {
border-bottom: 1px solid black;
font-family: Comic sans MS;
margin: left;
}
#exit {
cursor: pointer
}
#open {
display:inline-block;
cursor: pointer;
color: white;
font-size: 30px;
}
/* Animate any left property value change */
#body, #menu {
/* Add vendor prefixes too if you're not pre-compiling your stylesheet */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
/* This is the standard declaration */
transition: left 0.5s ease-in-out;
}
/* Toggle menu open */
body.menu-open #menu{
left: 0;
}
body.menu-open #body{
left: 288px;
}
Javascript
这将在用户单击任一切换按钮时切换 body 元素上的类 menu-open。
$(function(){
var $toggles = $('#open, #exit'), $body = $('body');
$toggles.bind('click', function(){ $body.toggleClass('menu-open'); });
});
关于javascript - 我正在尝试使用 jQuery 制作滑入式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30733534/