Question

我有这个代码，这意味着使用jQuery，以便在显示导航时＃39;单击按钮，该按钮将消失，并隐藏导航＆＃39;将出现按钮，导航选项也将出现。希望那就是“隐藏”＆＃39;按钮会反过来。我可以让show hide按钮消失并相应地重新出现，但导航选项就会保留到位。

以下是代码：

＆＃13;

var nav = function(){
	    $('.navtoggle').click(function(){
		    $('#navbar').animate({
		    	top:'10px'
		    	}, 200);
			
		    $('.navtoggle').animate({
		    	top:'-40px'
		    	}, 200);
			
		    $('.navexit').animate({
		    	top:'0px'
		        }, 200);
	    });

	    $('.navexit').click(function(){
	    	$('#navbar').animate({
		    	top:'-40px'
		    	}, 200);
			
		    $('.navtoggle').animate({
		    	top:'0px'
		        }, 200);
			
		    $('.navexit').animate({
		    	top:'-40px'
			    }, 200);		
	    });
    };
		
    $(document).ready(nav);

＆＃13;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">

    </head>
    <body>
	    <script type='text/javascript'       src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    <script src="navanimate.js"></script>
        <div id="top_container">
	    <div id ="navbar">
    	
        	<a class="navigation" href="index.html"><p>Home</p></a> 
        	<a class="navigation" href="CV.html"><p>CV</p></a> 
            <a class="navigation" href="Video.html"><p>Video</p></a>
            <a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
            <a class="navigation" href="Coursework.html"><p>Coursework</p></a>
            <a class="navigation" href="Animation.html"><p>Animation</p></a>
       
	</div>
	<div class ="navtoggle">Show Navigation</div>
	<div class ="navexit">Hide Navigation</div>        
	
    	<h1>Home Page</h1>
        
    </div>
    <div id="main_content">
    	<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
    	<ul><h3>About Me</h3>
        	<li>Candidate Number: 106244</li>
            
            <li>Course: Games and Multimedia Environments</li>
            <li>Year of Study: First year</li>
        </ul>
        
    <img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
        </div> 
        <div id="social_links">
    	<ul>Find Me Here
        	<li><a href="http://facebook.com/easyfreddy"><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/></a>Facebook</li>
            <li><a href="http://spoopy-freddie.tumblr.com/"><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/></a>Tumblr</li>
            <li><a href="http://therealfreddie.deviantart.com/"><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/></a>DeviantArt</li>
        </ul>
    </div>   
    <div id="footer"></div>


    </body>
    </html>

＆＃13;

我正在尝试为网站上的导航栏设置动画

0 个答案: