Jquery 菜单折叠

 

 

<html>
<haed>
	<title>test_01</title>
	<script language='javascript' type='text/javascript' src='../jquery-1.9.1.min.js'></script>
     	<script type='text/javascript' >
	   $(document).ready(function () {
            //加载时隐藏子菜单
            $('li ul').hide();
            //不包含子菜单时鼠标指针和项目图标
            $('li:not(:has(ul))')
           .css({ 'cursor': 'default', 'list-style-image': 'none' });
            //包含子菜单时鼠标指针和项目图标
            $('li:has(ul)')
            .css({ 'cursor': 'pointer', 'list-style-image': 'url(plus.gif)' });
            //单击含子菜单的项
            $('li:has(ul)').click(function (event) {
                if (this == event.target) {
                    if ($(this).children().is(':hidden')) {
                        $(this)
                    .css('list-style-image', 'url(minus.gif)')
                    .children().show();
                    }
                    else {
                        $(this)
                 .css('list-style-image', 'url(plus.gif)')
                 .children().hide();
                    }
                }
            })
        })
	</script>
</head>
<body>
    <fieldset>
        <legend>Collapsible List 1</legend>
        <ul>
            <li>0 前言</li>
            <li>1 CLR的执行模型
                <ul>
                    <li>1.1 将源代码编译成托管模块</li>
                    <li>1.4 执行程序集的代码
                        <ul>
                            <li>1.4.1 IL和验证</li>
                            <li>1.4.2 不安全的代码</li>
                        </ul>
                    </li>
                    <li>1.6 通过类型系统</li>
                </ul>
            </li>
            <li>4 类型基础
                <ul>
                    <li>4.1 System.Object</li>
                    <li>4.2 类型转换
                </ul>
            </li>
            <li>5 基元类型、引用类型、值类型</li>
        </ul>
    </fieldset>
</body>
</html>

 

你可能感兴趣的:(jquery,菜单,折叠)