自动伸缩列表的制作方法——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
自动伸缩列表的制作方法

发布作者:萧强   发布时间:2013-03-29   阅读次数:14300

下面是w3c为您提供的下拉列表的制作方法,很多地方都用的到哦!


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>   
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerAccordion.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function ()
            {

                $("#accordion1").ligerAccordion({ height: 300});
            });
            
     </script>
    <style type="text/css">
        body{ padding:20px; margin:0;}
        #accordion1{ width:160px;overflow:hidden;}
    </style>
</head>
<body style="padding:10px">
 
    <div id="accordion1">
         <div title="功能列表">
              <ul>
                    <li>列表一</li>
                    <li>列表二</li>
                    <li>列表三</li>
                    <li>列表四</li>
                    <li>列表五</li>
                </ul>
        </div>
         <div title="列表">
                <ul>
                    <li>列表一</li>
                    <li>列表二</li>
                    <li>列表三</li>
                    <li>列表四</li>
                    <li>列表五</li>
                </ul>
        </div>
        <div title="其他" style="padding:10px">
        其他内容
        </div>
    </div>  
    
    <div style="display:none;">
    
</div>
</body>
</html>






常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

JQuery新手练习场

热点文章

新闻资讯

标签云

友情赞助