JQuery_弹出菜单

jquery.js放在自己写的js之前

HTML

<ul>

       <a href="#">我是菜单1</a>

       <li><a herf="#" id="外部页面">我是子菜单1</a></li>

       <li><a herf="#" id="外部页面">我是子菜单2</a></li>

</ul>

<ul>

       <a href="#">我是菜单2</a>

       <li><a href="#">我是子菜单3</a></li>

        <li><a href="#">我是子菜单4</a></li>

</ul>

CSS

li{

  /*去掉li的小圆点*/

   list-style:none;

  /*内容缩进*/

  margin-left:18px;

  /*子菜单隐藏*/

  display:none;

  /*让链接不显示下划线*/

 text_decoration:none;

}

JS

//当注册的时候装载方法

$(document).ready(function(){

    //给所有的主菜单注册点击事件

     var as=${"ul>a"};

      as.click(function(){

       //获取当前被点击的a节点

       var aNode = ${this};

      //找到当前ul节点的所有的兄弟li节点

      var lis = aNode.nextAll("li");

     //让字节点显示或隐藏

       lis.toggle("show");

    })

   //li下的被点击后加载id中的外面页面

   ${"li>a"}.click(function(){

     $("#content").load.($(this).attr("id");)

    })

 

 

})