我想制作一个导航栏，可以用javascript隐藏和取消隐藏
[英]I want to make a navigation bar that i can hide and unhide with javascript
问题描述
I want to make a navigation bar that i can hide and unhide with javascript. 
我想制作一个导航栏，可以用javascript隐藏和取消隐藏。 I know this should work from jsfiddle ( http://jsfiddle.net/3pu868em/ ). 我知道这应该可以从jsfiddle（ http://jsfiddle.net/3pu868em/ ）运行。 Any help would be great thanks. 任何帮助将非常感谢。 I know it's something basic i've done wrong. 我知道这是我做错的基本事情。 Thanks for any help. 谢谢你的帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hide the Navigation</title>
<style>
.hidding{
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#"></a><li>Home</li></a>
<a href="#"></a><li>Contents</li></a>
<a href="#"></a><li>Social Media</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('hidding');
});
</script>
</body>
</html>
3 个解决方案
解决方案1
2 2014-11-29 05:47:34
Be sure to include jQuery before the script. 确保在脚本之前包含jQuery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('hidding');
});
</script>
解决方案2
1 已采纳 2014-11-29 05:50:27
You're using jQuery but haven't included it on the page. 您正在使用jQuery，但尚未将其包含在页面中。 Put this in the <head> section of the page to include it: 将其放在页面的<head>部分中以包括它：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also, instead of toggling a class you can just use jQuery's .toggle() like this: 另外，除了切换类，您还可以使用jQuery的.toggle()如下所示：
<script>
$('.handle').on('click', function(){
$('nav ul').toggle();
});
</script>
解决方案3
0 2014-11-29 05:51:22
Add jquery to your page. 将jquery添加到您的页面。
<script src="http//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
use toggle/slideToggle method: 使用toggle/slideToggle方法：
$('nav ul').toggle(); or $('nav ul').slideToggle() instead of $('nav ul').toggleClass('hidding'); 或$('nav ul').slideToggle()代替$('nav ul').toggleClass('hidding');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.