首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

【JS惯用效果】jquery实现ul li菜单展开收起效果

2012-10-26 
【JS常用效果】jquery实现ul li菜单展开收起效果JSCode: //导入jquery库 script typetext/javascript sr

【JS常用效果】jquery实现ul li菜单展开收起效果
JSCode:

//导入jquery库

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

//程序代码
<script type="text/javascript">
   $(document).ready(function()
   {
    $("#mymenu ul li").next("ul").hide();
    $("#mymenu ul li").click(function()
    {
     $(this).next("ul").toggle();
    });
   });
</script>

 

HTMLCode:

<div id="mymenu">
      <ul>
        <li><a href="#">用户管理</a></li>
        <ul>
          <li><a href="#">用户查询</a></li>
          <li><a href="#">添加用户</a></li>
          <li><a href="#">用户组</a></li>
        </ul>
      </ul>
      <ul>
        <li><a href="#">课程管理</a></li>
        <ul>
          <li><a href="#">课程列表</a></li>
          <li><a href="#">添加课程</a></li>
        </ul>
      </ul>
   </div>
 

热点排行