收藏本页
联系我们
论坛帮助

牛头网络技术论坛程序员专区WEB技巧 → JS折叠菜单

垃圾帖子的防止方法 动网水印问题 sql里的字符替换方法 2003安全设置大全 短信检测提交问题

  共有540人关注过本帖树形打印

主题:JS折叠菜单

帅哥,在线噢!
牛头

  1楼


头衔:站长
金币:5059
经验:6148
金钱:9145
等级:管理员
文章:572
精华:10
加为好友
发送短信
个性首页
JS折叠菜单  发贴心情 Post By:2008-6-12 14:01:46 [只看该作者]

1.添加JS库

CODE:
<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>

2.建立xhtml结构:

CODE:
<div id="container">
    <H1 class="title"><A href="javascript:void(0)">(1)这里放标题</H1>
    <div class="content">
        <p>(1)这里放内容</p>
    </div>
    <H1 class="title"><A href="javascript:void(0)">(2)这里放标题</H1>
    <div class="content">
        <p>(2)这里放内容</p>
    </div><H1 class="title"><A href="javascript:void(0)">(3)这里放标题</H1>
    <div class="content">
        <p>(3)这里放内容</p>
    </div>
</div>

3.调用JS:

CODE:

<script type="text/javascript">
    //定义contents 组数为所有将要显示的内容
    var contents = document.getElementsByClassName('content');
    //定义contents 组数为所有标题,也是可点击展开的按钮
    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>

<script type="text/javascript">
    //定义contents 组数为所有将要显示的内容
    var contents = document.getElementsByClassName('content');
    //定义contents 组数为所有标题,也是可点击展开的按钮
    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>

完成.
简单而且效果不错吧
如果还要界面好看点,自已定义下CSS吧



在线咨询技术 [牛头][早起的鸟儿有虫吃!]
 高速双线主机 支持(0中立(0反对(0回到顶部