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>


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

  • 相关阅读:
    numpy-tutorial
    Pandas 数据分析资料
    python3 创建虚拟环境
    机器学习中的评价指标--02
    机器学习中的评价指标--01
    pytest 测试框架
    Ubuntu 添加删除用户
    VSCODE 设置护眼颜色
    信息熵、交叉熵、KL散度等等
    深度学习优化方法演变和公式理解
  • 原文地址:https://www.cnblogs.com/ferron/p/4529965.html
Copyright © 2011-2022 走看看