jquery下拉菜单

其实用jquery写下拉菜单非常的easy，如果你看过jquery你就能写。今天的这个下拉菜单把握整蒙了，不过还好不久我还是清醒了，好了我说说条件：点击出现下拉菜单点击菜单中的项目下拉消失，点击页面中其他的地方下拉菜单也要消失。点击另外的下拉别的下拉菜单也是消失，同样也是点击别的地方也可以消失。我当时想这个很easy了，于是就动手写了！下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqurry下拉菜单</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".dropList").toggle(function(){ $(this).next('div').show().end().parent().siblings().children('div').hide(); },function(){ $(this).next('div').hide().end().parent().siblings().children('div').hide(); }); $("html").click(function(){ $(".sub").hide(); }); }); </script> <style type="text/css"> a {text-decoration:none; color:green; } .quickNav ul li { float:left; padding:0 3px; list-style:none; position:relative; } .quickNav ul li span { cursor:pointer; color:orange; } .sub { display:none; width:100px; position:absolute; top:20px; left:0; text-align:center; height:auto; border:1px solid green; } .sub a { display:block; height:16px; padding:3px 0; color:green; } .sub a:hover { background:#ccc; } span { padding-left:5px;} </style> </head> <body> <div class="quickNav"> <ul> <li> <a href="http://tiktak.atcities.alltosun.net/popular">搜索引擎 </a> <span class="dropList">▼</span> <div class="sub"><a href="http://www.baidu.com">百度</a><a href="http://www.google.com.hk">谷歌</a></div> </li> <li>|</li> <li><a href="http://tiktak.atcities.alltosun.net/user/login">门户网站</a><span class="dropList">▼</span> <div class="sub"><a href="http://www.sina.com">新浪</a><a href="http://www.sohu.com">搜狐</a></div> </li> <li>|</li> <li><a href="http://tiktak.atcities.alltosun.net/user/login">web标准学习</a><span class="dropList">▼</span> <div class="sub"><a href="http://www.xh-css.cn/category/jquery%E6%8F%92%E4%BB%B6/">jquery</a><a href="http://www.xh-css.cn/category/css/">css</a><a href="http://www.xh-css.cn/category/seo%E4%BA%A4%E6%B5%81%E5%8C%BA/">seo</a></div> </li> <li style="clear:both; width:0; height:0; line-height:0; font-size:0; overflow:hidden;"></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

你可以先看jquery代码！
这个是可以实现点击出现下拉菜单，但是当你点击出现下拉你直接点击两外一个下拉这时候前一个下拉可以消失当前的夜可以显示这都正常但是这个时候你在点击上一个下拉菜单的时候就不会出现了，只有点击两次才会出现。因为toggle有两个function你第一次只点击了一次所以你在点击别的下拉之后再点击它就不会出现下拉因为这时候执行的是toggle的第二个function也就是隐藏！
到这时候我想到的是判断，但是由于自己的原生态js很差或者说就是基本不会所以很头痛！突然我想起何不在toggle的第二个function上在写的方法。想到这我想到了toggle下面再使用toggle方法。于是问题迎刃而解！这个是下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqurry下拉菜单</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".dropList").toggle(function(){ $(this).next('div').toggle().end().parent().siblings().children('div').hide(); },function(){ $(this).next('div').toggle().end().parent().siblings().children('div').hide(); }); $("html").click(function(){ $(".sub").hide(); }); }); </script> <style type="text/css"> a {text-decoration:none; color:green; } .quickNav ul li { float:left; padding:0 3px; list-style:none; position:relative; } .quickNav ul li span { cursor:pointer; color:orange; } .sub { display:none; width:100px; position:absolute; top:20px; left:0; text-align:center; height:auto; border:1px solid green; } .sub a { display:block; height:16px; padding:3px 0; color:green; } .sub a:hover { background:#ccc; } span { padding-left:5px;} </style> </head> <body> <div class="quickNav"> <ul> <li> <a href="http://tiktak.atcities.alltosun.net/popular">搜索引擎 </a> <span class="dropList">▼</span> <div class="sub"><a href="http://www.baidu.com">百度</a><a href="http://www.google.com.hk">谷歌</a></div> </li> <li>|</li> <li><a href="http://tiktak.atcities.alltosun.net/user/login">门户网站</a><span class="dropList">▼</span> <div class="sub"><a href="http://www.sina.com">新浪</a><a href="http://www.sohu.com">搜狐</a></div> </li> <li>|</li> <li><a href="http://tiktak.atcities.alltosun.net/user/login">web标准学习</a><span class="dropList">▼</span> <div class="sub"><a href="http://www.xh-css.cn/category/jquery%E6%8F%92%E4%BB%B6/">jquery</a><a href="http://www.xh-css.cn/category/css/">css</a><a href="http://www.xh-css.cn/category/seo%E4%BA%A4%E6%B5%81%E5%8C%BA/">seo</a></div> </li> <li style="clear:both; width:0; height:0; line-height:0; font-size:0; overflow:hidden;"></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

于是今天就贴出来希望能帮助遇到相近问题的同行！

标签: jquery, 下拉菜单

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

jquery下拉菜单

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能