IT源码网

javascript:折叠菜单讲解

shasha 2020年10月18日 Web前端 268 0

  最近做网页用到了折叠菜单,在网上搜索了一番后还不错,现在放到自己的博客中。

  下面是自己改的一个折叠菜单,导入三个js文件就可以执行啦。

<!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>Untitled Document</title> 
        <script src="prototype.lite.js" type="text/javascript"></script> 
        <script src="moo.fx.js" type="text/javascript"></script> 
        <script src="moo.fx.pack.js" type="text/javascript"></script> 
        <style> 
            body { 
                font:12px Arial, Helvetica, sans-serif; 
                color: #000; 
            } 
            #container { 
                width: 200px; 
            } 
            H1 { 
                font-size: 11px; 
                margin: 0px; 
                width: 200px; 
                cursor: pointer; 
                height: 22px; 
                line-height: 20px;     
            } 
            H1 a { 
                display: block; 
                padding-top: 1px; 
                padding-right: 8px; 
                padding-bottom: 0px; 
                padding-left: 8px;     
                width: 500px; 
                color: #000; 
                height: 22px; 
                text-decoration: none;     
                moz-outline-style: none; 
                background-image: url(title.gif); 
                background-repeat: repeat-x; 
            } 
            .content{ 
                padding-left: 8px; 
            } 
        </style> 
    </head> 
 
    <body> 
        <div id="container"> 
            <!-- 第一个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">门户网站</a></H1> 
            <div class="content"> 
                <p><a href=http://www.baidu.com/>进入百度</a></p> 
                <p><a href=http://www.yahoo.com/>进入雅虎</a></p> 
            </div> 
 
            <!-- 第二个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">购物天堂</a></H1> 
            <div class="content"> 
                <p><a href=http://www.amazon.cn/>进入亚马逊</a></p> 
                <p><a href=http://www.taobao.com/>进入淘宝</a></p> 
            </div> 
 
            <!-- 第三个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">聊天室</a></H1> 
            <div class="content"> 
               <p><a href=http://web.qq.com/>QQ</a></p> 
               <p><a href=https://webim.feixin.10086.cn/login.aspx>飞信</a></p> 
            </div> 
        </div> 
 
        <script type="text/javascript"> 
            //定义contents 数组为所有将要显示的内容 
            var contents = document.getElementsByClassName('content'); 
            //定义toggles 数组为所有标题,也是可点击展开的按钮 
            var toggles = document.getElementsByClassName('title'); 
            //调用moofx JS库 
            var myAccordion = new fx.Accordion( 
                toggles, contents, {opacity: true, duration: 400}    //opacity确定是否有alpha透明变化,duration确定动作所有事件 
            ); 
            myAccordion.showThisHideOpen(contents[0]);    //默认打开第一个内容 
        </script> 
    </body> 
</html>

   效果图:

 

  

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

网页调试:myeclipse修改javascript代码后,执行没有变化呀讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。