用Javascript实现的折叠菜单


用法:

  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>

  完成.

  简单而且效果不错吧

  如果还要界面好看点,自已定义下CSS吧


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3