这个折叠菜单如何实现全部展开和全部折叠功能呢

本帖最后由 teng315 于 2011-10-30 02:29:50 编辑

解决方案 »

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

<a>全部展开</a>
    <a>全部折叠</a>
    <script>
    $(document).ready(function(){
        $("a").eq(-2).click( function () {
           $(".child").slideDown("slow");
        });
        $("a").eq(-1).click( function () {
           $(".child").slideUp("slow");
        });
    });
    </script>body上面放上这段。
<!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>