zoukankan      html  css  js  c++  java
  • [效果]JS折叠菜单-使用方法 (Moo.Fx)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-06-24)

    用法:

    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>


    最近用到了这个,记录一下。

  • 相关阅读:
    HDU2363 最短路+贪心
    stl-----map去重,排序,计数
    STL------sort三种比较算子定义
    栈------表达式求值
    踩水坑系列一
    第一周 动态规划Dynamic Programming(一)
    模拟递归回溯贪心专题入门
    HDU1013,1163 ,2035九余数定理 快速幂取模
    HDU1005 找规律 or 循环点 or 矩阵快速幂
    入门基础常识
  • 原文地址:https://www.cnblogs.com/ferron/p/4529965.html
Copyright © 2011-2022 走看看