无法理解为什么它不起作用的逻辑，但基本上我正在从事学校作业，创建了jQuery来创建一个具有多层的站点，我做到了。一切都完成了，除非我的导航仅在第一次从按钮点击中调用它，否则第二次是动画。其他一切似乎都很好，但是这。真的很感谢您的帮助。实时示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 6 | jQuery Usability </title>
<link rel="stylesheet" href="CSS/A6.css">
<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helpful for older Blackberries -->
<meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
<meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->
<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//$('ul:first').hide();
//$('ul li').hide();
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
/*('h1>').click(function (event) {
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('h1').hide();
});*/
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
/*$('a.bck').click(function() {
var $aAside = $('aside');
$aAside.animate({
left: 300})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10})
return false;
}); //closes bck click*/
$('a.bck').click(function() {
var $aAside = $('aside');
$('aside>ul>li:visible').hide();
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
}); //closes .ready()
</script>
</head>
<body>
<h1 class="menu"><a class="btnDown" href="#"> Main Menu </a></h1>
<nav class="navBar" >
<li><a class="menuShow" href="#"> Assignment 6 </a></li>
<ul>
<li><a class="contentDown" href="#" > Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<h2 id="round"><a class="bck" href="#"> Back </a></h2>
<aside>
<ul>
<li> Interactive media has been apart of my life since as long as I can remember. I have always been fascinated with any form of media including television, video games, handheld games, or websites. However before attending school to study interactive media, I never noticed the little things that can really affect the experience for a user. One item in particular being diegetic elements. Diegetic elements are objects within a media that only the user knows about. For instance, in a video game a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining. These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. We have also been exposed to 'non-diegetic' elements that act just the opposite of diegetic ones. Non-diegetic elements are items inside interactivity that are supposed to be there. This is a way of implementing a diegetic element into the space of the world you create. For example, a non-diegetic element would be the ammo bar being placed on the gun, instead of a static bar on the side of the screen. Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element. </li>
</ul>
<ul>
<li> One ways people have done this is throwing elements in the world that would be believable to the player that they should be there. Instead of throwing a sidebar with your gun ammo and grenade count, it would make sense if a game is placed in modern-time that we would have technology available to put that information on the gun. One of the biggest examples of great uses of non-diegetic elements in the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red, or your player begins to lose the ability to act normal when they are under fire. Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves. The problem is that you can have too much non-diegetic presence that would confuse the user instead of help them which was originally intended. Resident Evil received a lot of harsh criticism for their lack of diegetic presence to help the player finish the game. It was hard for the user to be able to tell when the character was going to die based on their health system. If you received damage your character will hunch over, but it's unclear how much damage you're taking. The user will often die </li>
</ul>
<ul>
<li> without knowing whether or not you should have died, as opposed to a health bar that would show you. Contrary to too much non-diegetic presence, is too much diegetic elements. In titles such as World of Warcraft, or League of Legends, some are simply overwhelmed by the fact that half of the screen is objects that you are supposed to be aware of but until you learn the game they make as much sense as flying pigs. In conclusion, it is best to find that medium for any interactive media that has non-diegetic or diegetic elements. It is different for each occasion, for a first-person shooter the need for diegetic elements is acute, while in a complex game like World of Warcraft it is necessary. Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>
<figure>
<!-- PUT TV IMAGE HERE -->
</figure>
</body>
</html>
CSS
html, body
{
/* Very basic CSS resets */
margin:0px;
padding:0px;
height:100%;
}
/* From HTML5 Boilerplate:
1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
2. Force vertical scrollbar in non-IE
3. Prevent iOS text size adjust on device orientation change, without disabling user zoom
*/
html
{
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* This will enforce block-level properties to HTML5 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, time
{
display: block;
}
/* Make sure there aren't pesky outlines added to click events */
a:hover, a:focus, a:active
{
outline: 0;
}
/* MOBILE-FIRST CSS HERE */
body
{
background: beige;
}
/* DESKTOP */
nav
{
height: 154px;
position: relative;
padding-top: 40px;
}
h1 {
background: tomato;
display:block;
width:30%;
position:relative;
padding:7px;
text-align:center;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.7;
}
h1>a
{
color: beige;
text-decoration: none;
}
h1>a:hover
{
color:beige;
}
a.contentDown
{
color: red;
text-decoration: none;
}
ul
{
text-align: center;
padding-top: 20px;
}
ul li
{
list-style-type: none;
padding: 15px;
background: beige;
padding: 20px;
margin: 20px;
width: 10%;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.8;
}
ul li>a:hover
{
color:beige;
}
aside
{
padding-top: -20px;
}
aside>ul li
{
width: 50%;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -100px;
background:beige;
color: tomato;
}
h2#round
{
background: cadetblue;
display:block;
width:auto;
position:absolute;
padding:7px;
text-align:center;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.9;
margin-left: -250px;
padding-top: 10px;
}
h2>a
{
text-decoration: none;
color: beige;
}
h2>a:hover
{
color: tomato;
}
/* ==================================
MEDIA QUERIES!
================================= */
在单击navbar中的链接之前，navbar具有HTML代码：
<nav class="navBar">
单击链接时，它具有代码：
<nav class="navBar" style="right: 300px;">
然后，当您返回时，它具有代码：
<nav class="navBar" style="right: 300px; left: 10px;">
会产生一个问题，这意味着您的jQuery无法更改Navbar的位置。因此，您要做的就是将"左"设置为"自动" - 这是左侧的默认值，允许您的Navbar再次移动。无论如何，这是一个带有我的解决方案的JSFIDDLE：http：//jsfiddle.net/lpdkg/（更改在JavaScript窗口中的112和117上）