码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 菜单栏 展开与收缩例子

时间:2014-05-01 00:02:52      阅读:455      评论:0      收藏:0      [点我收藏+]

标签:http   blog   class   div   java   c   log   t   javascript   sp   ext   

废话少说,上代码

<!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>
    <title>测试 查找下一个元素</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#menu ul li:first ul").show();
            $("#menu ul li:gt(0) ul").hide();
            $("#menu li a.parentMenu").click(function () {
                if ($(this).next(".childMenu").is(":hidden")) {
                    $("ul .childMenu").hide();
                    $(this).next(".childMenu").show();
                }
                else {
                    $("ul .childMenu").hide();
                    $(this).next(".childMenu").hide();
                }
            });
        });
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#" class="parentMenu">一级菜单A</a>
                <ul class="childMenu">
                    <li>A的子菜单</li>
                    <li>A的子菜单</li>
                    <li>A的子菜单</li>
                    <li>A的子菜单</li>
                </ul>
            </li>
            <li><a href="#" class="parentMenu">一级菜单B</a>
                <ul class="childMenu">
                    <li>B的子菜单</li>
                    <li>B的子菜单</li>
                    <li>B的子菜单</li>
                    <li>B的子菜单</li>
                </ul>
            </li>
            <li><a href="#" class="parentMenu">一级菜单C</a>
                <ul class="childMenu">
                    <li>C的子菜单</li>
                    <li>C的子菜单</li>
                    <li>C的子菜单</li>
                    <li>C的子菜单</li>
                </ul>
            </li>
            <li><a href="#" class="parentMenu">一级菜单D</a>
                <ul class="childMenu">
                    <li>D的子菜单</li>
                    <li>D的子菜单</li>
                    <li>D的子菜单</li>
                    <li>D的子菜单</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

  做一个笔记,主要记一下jQuery选择器  如何选中 下一个元素,如何选择 元素集中指定某个或者某几个元素

jQuery 菜单栏 展开与收缩例子,布布扣,bubuko.com

jQuery 菜单栏 展开与收缩例子

标签:http   blog   class   div   java   c   log   t   javascript   sp   ext   

原文地址:http://www.cnblogs.com/shanzhigang/p/3701132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!