这个折叠菜单怎样变成可以同时展开多个节点？

本帖最后由 teng315 于 2011-11-19 17:23:26 编辑

解决方案 »

  1.   

    能不能加一个控制呢？
    比如: OnlyOpenOne = True
      

  2.   

    <!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>jQuery多级下拉菜单</title>
    <script language="javascript" type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
    ul, li { list-style:none; font-size:12px; line-height:20px; width:80px; margin:0; padding-left:6px; }
    .child { display:none; }
    .nav a { display:block; color:#5c84c1; padding-left:22px; }
    </style>
    <script language="javascript" type="text/javascript">
        //说明 所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套
        $(document).ready(function () {
            //$(".nav ul li").children("ul").hide();
            $(".nav").find("li").not(":has(ul)").children("a").css({ textDecoration: "none", color: "#333", background: "none" })
    .click(function () {
        $(this).get(0).location.href = "'" + $(this).attr("href") + "'";
    });
            $(".nav").find("li:has(ul)").children("a").css({ background: "url(images/statu_close.gif) no-repeat left top;" })
    .click(function () {
        if ($(this).next("ul").is(":hidden")) {
            $(this).next("ul").slideDown("slow");
            if ($(this).parent("li").siblings("li").children("ul").is(":visible")) {
                //$(this).parent("li").siblings("li").find("ul").slideUp("1000");
                $(this).parent("li").siblings("li:has(ul)").children("a").css({ background: "url(images/statu_close.gif) no-repeat left top;" })
    .end().find("li:has(ul)").children("a").css({ background: "url(images/statu_close.gif) no-repeat left top;" });
            }
            $(this).css({ background: "url(images/statu_open.gif) no-repeat left top;" });
            return false;
        } else {
            $(this).next("ul").slideUp("normal");
            //不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏
            $(this).css({ background: "url(images/statu_close.gif) no-repeat left top;" });
            $(this).next("ul").children("li").find("ul").fadeOut("normal");
            $(this).next("ul").find("li:has(ul)").children("a").css({ background: "url(images/statu_close.gif) no-repeat left top;" });
            return false;
        }
    });
        });
        // 折叠展开
        $(function () {
            $('#allin').click(function () {
                $('ul.child').hide();
            });
            $('#allout').click(function () {
                $('ul.child').show();
            });
        });
    </script>
    </head>
    <body>
    <div class="nav">
    <a href="javascript:void(0);" id="allout">全部展开</a> <a href="javascript:void(0);" id="allin">全部折叠</a>
      <ul>
        <li> <a href="#">一级菜单</a>
          <ul class="child">
            <li> <a href="#">二级菜单</a> </li>
            <li> <a href="#">二级菜单</a>
              <ul class="child">
                <li> <a href="#">三级菜单</a> </li>
                <li> <a href="#">三级菜单</a> </li>
              </ul>
            </li>
            <li> <a href="#">二级菜单</a>
              <ul class="child">
                <li> <a href="#">三级菜单</a> </li>
                <li> <a href="#">三级菜单</a>
                  <ul class="child">
                    <li> <a href="">四级菜单</a> </li>
                    <li> <a href="">四级菜单</a> </li>
                    <li> <a href="">四级菜单</a>
                      <ul class="child">
                        <li> <a href="">五级菜单</a> </li>
                        <li> <a href="">五级菜单</a> </li>
                        <li> <a href="">五级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#">一级菜单</a>
          <ul class="child">
            <li> <a href="#">二级菜单</a> </li>
            <li> <a href="#">二级菜单</a> </li>
          </ul>
        </li>
        <li> <a href="#">一级菜单</a>
          <ul class="child">
            <li> <a href="#">二级菜单</a> </li>
            <li> <a href="#">二级菜单</a> </li>
          </ul>
        </li>
        <li> <a href="#">一级菜单</a> </li>
      </ul>
    </div>
    </body>
    </html>