Ajax之联级菜单

1.html代码

    <ul>        <a href="#">菜单1</a>            <li><a href="#">子菜单1</a></li>            <li><a href="#">子菜单2</a></li>        </ul>            <ul>            <a href="#">菜单2</a>            <li><a href="#">子菜单3</a></li>            <li><a href="#">子菜单4</a></li>        </ul>

2.css代码

/**标签选择器实现去掉列表圆点**/ li { /**去掉列表圆点**/list-style:none;/**缩进布局**/margin-left:15px;/**子菜单隐藏**/display:none;}

3.js代码

/** 点击主菜单，子菜单显示出来，再次点击，子菜单隐藏* */// 页面装载的时候，找到主菜单并加上点击事件$(function() {    // 找到所有主菜单下紧邻的a标签    var as = $("ul>a");    // 为主菜单下紧邻的a标签加单击事件    as.click(    function(){        //找到当前的a中的li，并让其显示        //获取当前被点击的a节点        var aNode=$(this);        //找到a节点下所有的li的兄弟节点        var lis = aNode.nextAll("li");        //toggle实现展开或者隐藏        lis.toggle("show");    }           );});

4.效果