1、hide() show()

使用hide show 实现菜单自动展开、折叠效果

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="cp" value="${pageContext.request.contextPath}" ></c:set>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
           #menu
           {
                   width:200px;
           }
            ul li ul li
            {
                display: none;
            }
        </style>
        <script type="text/javascript" src="${cp}/js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#main > li").hover(function(){
                    $(this).children().children().show();
                },function(){
                    $(this).children().children().hide();
                });
                $("#main > li > ul > li").hover(function(){
                    $(this).children().children().show();
                },function(){
                    $(this).children().children().hide();
                });
            });
        </script>
    </head>
<body>
  <div id="menu">
    <ul id="main">
        <li>菜单1
            <ul>
                <li><a href="###">列表1</a></li>
                <li>列表2
                    <ul>
                        <li><a href="###">子列表1</a></li>
                        <li><a href="###">子列表2</a></li>
                        <li><a href="###">子列表3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>菜单2
            <ul>
                <li>列表1</li>
                <li>列表2</li>
            </ul>        
        </li>
        <li>菜单3
            <ul>
                <li>列表1</li>
                <li>列表2</li>
            </ul>        
        </li>
    </ul>
  </div>
</body>
</html>
View Code