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

爵罗先生 2011-11-19 05:22:05
能不能加一个开关来控制呢？
菜单怎样变成可以同时展开多个节点呢？
现在点击只能打开一个，谢谢了
<!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>
...全文
161 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
爵罗先生 2011-11-19
  • 打赏
  • 举报
 回复
谢谢啊 js是一点也不懂 正在学习呢
p2227 2011-11-19
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 teng315 的回复:]

不懂JS啊 郁闷啊
[/Quote]不懂就要自己查资料学习
p2227 2011-11-19
  • 打赏
  • 举报
 回复 
<!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>
爵罗先生 2011-11-19
  • 打赏
  • 举报
 回复
不懂JS啊 郁闷啊
爵罗先生 2011-11-19
  • 打赏
  • 举报
 回复
能不能加一个控制呢？
比如: OnlyOpenOne = True
默默不得鱼 2011-11-19
  • 打赏
  • 举报
 回复
干掉你的slideUp()不就结了
VC Tree 树形菜单（折叠展开式菜单）.rar
VC 实现一个实用的Tree菜单，看上去很实用的Treeview树形菜单，节点展开、折叠的菜单，本示例中的节点树在程序打开后自动加载windows的各磁盘内容，鼠标点击“ ”号可展开子节点，且支持无限级子节点，这种菜单可...
VB 支持多行显示的Treeview树状菜单控件实例.rar
可以支持多行内容的显示，并且可以展开折叠（收起）的树状菜单控件源码，可自定义颜色的Treeview菜单树，如测试图所示的效果，一共演示了三个使用此Treeview完成的效果，菜单树中的每一个节点都可以包括子节点，...
如何使用VC cTree实现树形菜单的例子.rar
如何使用VC cTree实现树形菜单的例子，也就是一般显示在窗口左侧，可以折叠展开的操作菜单，展开、闭合多个菜单节点，cTree类可以用来完成树控条目中的拖拽以及为您的树控件设置图片（bmp）背景的功能。示例程序中只...
VB TreeView应用实例-支持多节点选择.rar
一个支持多节点选择的VB TreeView应用实例，TreeView树型多节点选择原型示例。你或许对下列代码感兴趣： 　VB版竖直带TAB的树形折叠菜单 　vb增强型Treeview视图菜单控件
ztree树形菜单
它与 IE、FireFox、Chrome 等浏览器保持兼容，在一个页面内可同时生成多个Tree 实例，支持一次性静态生成和Ajax 异步加载两种方式，能够响应和反馈多种事件。它提供了个性化的定制服务，支持灵活的参数配置，用户...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章