html级联展开标签列表,jQuery实现可收缩展开的级联菜单实例
代码
如果⽤纯JavaScript代码⽽不使⽤框架的话，那么做⼀个级联菜单也许是⼀件让⼈⽣畏的事情，但有了框架，这件事情就很容易了，这就是框架的好处，极⼤地提⾼了开发效率，并且更可靠和易于维护。使⽤jQuery来实现级联菜单的⼀般步骤如下：
·1.⾸先使⽤
和
创建⼀个级联菜单
/p>
"/TR/html4/loose.dtd">
itcast的JQuery应⽤⽰例：弹出菜单
·2.编写JavaScript代码，控制级联菜单的收缩
//需要点击主菜单的按钮时，对应的⼦菜单可以显⽰，再次点击⼦菜单则隐藏
//需要编写代码，在页⾯装载时，给所有的主菜单添加onclick的事件
//保证主菜单点击时可以显⽰或隐藏⼦菜单
//注册页⾯装载时执⾏的⽅法
$(document).ready(function() {
//这⾥需要⾸先到所有的主菜单
//然后给所有的主菜单注册点击事件
//到ul中的节点
var as = $("ul > a");
as.click(function() {
//这⾥需要到当前ul中的li，然后让li显⽰出来
/
/获取当前被点击的a节点
var aNode = $(this);
//到当前a节点的所有li兄弟字节点
var lis = All("li");
//让⼦节点显⽰或隐藏
});
});
·创建css⽂件，来控制标签的显⽰效果
/*如何让所有的li都不显⽰⼩圆点，可以使⽤css的标签选择器*/
li {
list-style: none; /*使li前⾯的⼩圆点消失*/
margin-left: 18px; /*让⼦菜单向右移动⼀段距离，达到缩进的效果*/
display: none; /*让所有的⼦菜单都先隐藏*/
}
a{
text-decoration: none; /*让链接的下划线消失*/
}
jQuery带来的⽅便：
1.在被点击的菜单时，仅需要⼀个$(this)就可以实现
2.节点的显⽰与隐藏，只⽤⼀条语句：toggle()就可以，并且还可以在数组上实现所有节点都具有这种功能。
jquery框架原理3.到某个标签下所有的某种标签：$("ul > a")

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。