下拉菜单打开后怎么关闭

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>完成.
上面的代码只能完成菜单的打开，点击后菜单不关闭

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

查文档看看怎么使用fx.Accordion
<!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>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
        $("ul li").hover(function(){
            $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示；
        },function(){
            $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul；
        })
        $("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css；

    })
//］>
</script><style type="text/css">
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{display:none;}
ul a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px}
ul li a:hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}</style></head>
<body><ul>
   <li>
      <a href="">栏目一</a>
      <ul>
         <li><a href="">菜单一</a></li>
         <li><a href="">菜单一</a></li>
         <li><a href="">菜单一</a></li>
         <li><a href="">菜单一</a>
             <ul class="aaa">
                <li><a href="">菜单三</a></li>
                <li><a href="">菜单三</a>
                    <ul class="aaa">
                        <li><a href="">菜单三</a></li>
                        <li><a href="">菜单三</a></li>
                        <li><a href="">菜单三</a>
                            <ul class="aaa">
                                <li><a href="">菜单三</a></li>
                                <li><a href="">菜单三</a></li>
                                <li><a href="">菜单三</a>
                                    <ul class="aaa">
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                     </ul>
                                </li>
                                <li><a href="">菜单三</a></li>
                             </ul>
                        </li>
                        <li><a href="">菜单三</a></li>
                     </ul>
                </li>
                <li><a href="">菜单三</a></li>
                <li><a href="">菜单三</a></li>
             </ul>
         </li>
      </ul>
   </li>
   <li>
      <a href="">栏目二</a>
   </li>
   <li>
      <a href="">栏目三</a>
       <ul>
         <li><a href="">菜单三</a>
         </li>
         <li><a href="">菜单三</a>
             <ul class="aaa">
                <li><a href="">菜单三</a></li>
                <li><a href="">菜单三</a>
                    <ul class="aaa">
                                <li><a href="">菜单三</a></li>
                                <li><a href="">菜单三</a></li>
                                <li><a href="">菜单三</a>
                                    <ul class="aaa">
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                     </ul>
                                </li>
                                <li><a href="">菜单三</a>
                                    <ul class="aaa">
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a>
                                            <ul class="aaa">
                                                <li><a href="">菜单三</a></li>
                                                <li><a href="">菜单三</a></li>
                                                <li><a href="">菜单三</a></li>
                                                <li><a href="">菜单三</a></li>
                                             </ul>
                                        </li>
                                        <li><a href="">菜单三</a></li>
                                        <li><a href="">菜单三</a></li>
                                     </ul>
                                </li>
                             </ul>
                </li>
                <li><a href="">菜单三</a></li>
                <li><a href="">菜单三</a></li>
             </ul>
         </li>
         <li><a href="">菜单三</a></li>
         <li><a href="">菜单三</a></li>
      </ul>
   </li>
   <li>
      <a href="">栏目四</a>
   </li>
</ul></body>
</html>