本帖最后由 yyixin 于 2009-08-24 20:06:05 编辑

解决方案 »

  1.   


    <script src="js/jquery-1.3.2.js"></script>
    <script type=text/javascript> 
    var cur;
    window.onload=function(){
      $("#main>li").click(function(){
        var obj = $(this).children("#sub")[0];
        if(cur == obj) return false;
        if(cur!=null) cur.style.display = "none";
        obj.style.display = "block";
        cur = obj;
      });
    }
    </script>
    <style> 
    li{cursor:pointer}
    ul{list-style:none;width:200px;}
    #main{background:green;color:#FFF;}
    #sub{background:#EEE;display:none;color:blue;margin-left:0;}
    </style> 
    <ul id="main">
    <li>menu1
    <ul id="sub">
    <li>sub11</li>
    <li>sub12</li>
    </ul>
    </li>
    <li>menu2
    <ul id="sub">
    <li>sub21</li>
    <li>sub22</li>
    </ul>
    </li>
    <li>menu3
    <ul id="sub">
    <li>sub31</li>
    <li>sub32</li>
    </ul>
    </li>
    </ul>
      

  2.   

    http://www.scriptlover.com/controls/AccControl/demo.html
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type=text/javascript> 
    $(document).ready(function(){
    //点击事件:
    $("#click .list").each(function(){
    var _this = $(this);
    var _menu = _this.find("#menu");
    var _sub = _this.find("#sub");
    _menu.click(function(){
    _sub.slideToggle();
    });
    });

    //鼠标经过
    $("#mouseover .list").each(function(){
    var _this = $(this);
    var _menu = _this.find("#menu");
    var _sub = _this.find("#sub");
    var _height = _sub.height();
    _this.hover(
    function(){
    _sub.stop().css("height",0+"px").show().animate({"height":_height+"px"},300);
    },function(){
    _sub.stop().animate({"height":0},300);
    }
    );
    });
    });
    </script>
    <style> 
    #click,#mouseover{
    background:green;
    color:#FFF;
    width:200px;
    }
    .list #menu{
    cursor:pointer;
    }
    .list #sub{
    list-style:none;
    width:200px;
    height:40px;
    margin:0px;
    background:#EEE;
    display:none;
    color:blue;
    overflow:hidden;
    }
    </style> 
    </head><body>
    <!-- 点击的例子: -->
    <div id="click">
    <div class="list">
         <div id="menu">menu1</div>
            <ul id="sub">
                <li>sub11</li>
                <li>sub12</li>
            </ul>
        </div>
    <div class="list">
         <div id="menu">menu2</div>
            <ul id="sub">
                <li>sub21</li>
                <li>sub22</li>
            </ul>
        </div>
    <div class="list">
         <div id="menu">menu3</div>
            <ul id="sub">
                <li>sub31</li>
                <li>sub32</li>
            </ul>
        </div>
    </div>
    <br/>
    <!-- 鼠标经过的例子: -->
    <div id="mouseover">
    <div class="list">
         <div id="menu">menu1</div>
            <ul id="sub">
                <li>sub11</li>
                <li>sub12</li>
            </ul>
        </div>
    <div class="list">
         <div id="menu">menu2</div>
            <ul id="sub">
                <li>sub21</li>
                <li>sub22</li>
            </ul>
        </div>
    <div class="list">
         <div id="menu">menu3</div>
            <ul id="sub">
                <li>sub31</li>
                <li>sub32</li>
            </ul>
        </div>
    </div>
    </body>
    </html>