回顾树形菜单的一些思考
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回顾树形菜单的一些思考相关的知识，希望对你有一定的参考价值。
什么都不说,先上代码.
<!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=gb2312" /> <title>exercise制作树形菜单</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> *{margin:0;padding:0;} body{font-size:14px;line-height:20px;} a{text-decoration:none;} a:hover {color:#f00;} ul,div {margin-left:50px;} div{margin:10px 50px 10px;} ul{display:none;} li{list-style:none;; } li a {font-size:12px;} h3{margin:20px 0;} img{vertical-align: middle;} </style> </head> <body> <h3><img src="images/fold.gif" />树形菜单</h3> <div><a data-name="art"><img src="images/fclose.gif" />文学艺术</a></div> <ul id="art"> <li><a><img src="images/doc.gif" />先锋写作</a></li> <li><a><img src="images/doc.gif" />小说散文</a></li> <li><a><img src="images/doc.gif" />诗风此韵</a></li> </ul> <div><a data-name="photo"><img src="images/fclose.gif" />贴图专区</a></div> <ul id="photo"> <li><a><img src="images/doc.gif" />真我风采</a></li> <li><a><img src="images/doc.gif" />视频贴图</a></li> <li><a><img src="images/doc.gif" />行行摄摄</a></li> <li><a><img src="images/doc.gif" />Flash贴图</a></li> </ul> <div><a data-name="home"><img src="images/fclose.gif" />房产论坛</a></div> <ul id="home"> <li><a><img src="images/doc.gif" />我要买房</a></li> <li><a><img src="images/doc.gif" />楼市话题</a></li> <li><a><img src="images/doc.gif" />我要卖房</a></li> <li><a><img src="images/doc.gif" />租房心语</a></li> <li><a><img src="images/doc.gif" />二手市场</a></li> </ul> <div><a data-name="message"><img src="images/fclose.gif" />娱乐八卦</a></div> <ul id="message"> <li><a><img src="images/doc.gif" />红楼一梦</a></li> <li><a><img src="images/doc.gif" />笑话论坛</a></li> <li><a><img src="images/doc.gif" />休闲生活</a></li> <li><a><img src="images/doc.gif" />大话春梦</a></li> </ul> <script> $(function(){ var button = document.querySelectorAll("a[data-name]"); $(button).each(function(){ this.onclick = toggle; }) function toggle(e){ var idName = $(e.target).attr("data-name"); var ctrlContent = $("#"+idName); if($(ctrlContent).css("display") == "block"){ $(ctrlContent).css("display","none"); }else{ $(ctrlContent).css("display","block"); } } }) </script> </body> </html>
此代码为一个树形菜单,以前用JS源码写过,现在回顾过程中用JQ再写一遍,以下为我写此次代码过程中遇到的一些问题及思考.
1.jq中each()方法,用以下js源码依然可以实现.
var button = document.querySelectorAll("a[data-name]");
for(var i = 0;i<button.length;i++)
{button[i].onclick = toggle; }
但是each()方法相对于以上js源码不同之处在于:
①它是以没一个匹配的元素作为上下文来执行的;
js源码中的for循环中的this值为Window,而each()方法中的this指向的是相对应的DOM对象,本例中则指向的4个<a>标签.
因为this指向的是DOM对象,所有后面的点击事件也只能用原生JS方法.
如果想得到jQuery对象,则可以使用$(this)函数.对应的点击事件可改成
$(this).click(toggle);
②each()方法在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘);
根据返回的数字值,我们可以做许多事情,如修改图片路径:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
2.target属性
①html中<a> 标签的 target 属性规定在何处打开链接文档;
@jQuery的target属性规定哪个 DOM 元素触发了该事件。
以上内容为自己写代码过程中的一些思考,错误在所难免,欢迎大家前来指正错误,交流问题.
以上是关于回顾树形菜单的一些思考的主要内容，如果未能解决你的问题，请参考以下文章