基于JQuery的折叠菜单

来源：互联网发布：c语言输出整数部分编辑：程序博客网时间：2024/04/29 15:12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>基于JQuery的折叠菜单</title>

  <script language='JavaScript' type='text/javascript' src='jquery-1.1.3.1.pack.js'></script>

  <style type='text/css'>
   body{

    font-family:"Arial Narrow";
    font-size:16px;
   }
   dl{
    width:300px;
   }
   dl,dd{
    margin:0;
   }
   dt{
    size:10px;
    margin:2px;
    padding:5px;
   }
   dt a{
    text-decoration:none;
    background:#8080ff;
   }
   dt a:hover{
    background:#00ffff;
    text-decoration:underline;
   }
   dd a:hover{
    color:red;
    text-decoration:none;
   }
  </style>

  <script language='JavaScript' type='text/javascript'>
   $(document).ready(
     function(){
      $('dd:not(:first)').hide();           // 如果不是第一个dd就隐藏
      $('dt a').click(function()
         {
          $('dd:visible').slideUp('slow');
          $(this).parent().next().slideDown('slow');
          return false;
         }
      );
     }
   );

  </script>

</head>
<body>
  <dl>
  <dt><a href='#'>水果</a></dt>
  <dd>
   <ul>
    <li><a href='#'>苹果</a></li>
    <li><a href='#'>李子</a></li>
    <li><a href='#'>香蕉</a></li>
   </ul>
  </dd>
  <dt><a href='#'>java</a></dt>
  <dd>
   <ul>
    <li><a href='#'>jsp</a></li>
    <li><a href='#'>java用户界面编程</a></li>
    <li><a href='#'>JSP</a></li>
   </ul>
  </dd>
  <dt><a href='#'>家电</a></dt>
  <dd>
   <ul>
    <li><a href='#'>空调</a></li>
    <li><a href='#'>电视机</a></li>
    <li><a href='#'>冰箱</a></li>
   </ul>
  </dd>
  </dl>
</body>
</html>