JavaScript小练习效果之多级菜单

朴灿烈づ我的快乐病毒、 2022-09-20 05:56 160阅读 0赞

***练习要求***

1，布局可以随意添加或者删除，只要保证格式完整就可以自适应js代码。

2，每次点击只展开当前菜单，其它菜单如果有展开则全部收回。

3，当前菜单可以点击展开，也可以点击收缩。

4，前面的展开收缩符号要有相应的变化 “+” “-”

***HTML代码***

<ul id="nav">
        <li>
            <h2><span>+</span> 第一级菜单 </h2>
            <ul>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                            <h2><span>+</span> 第三级菜单 </h2>
                            <ul>
                                <li>
                                    <h2><span>+</span> 第四级菜单 </h2>
                                    <ul>
                                        <li>
                                        	<h2><span>+</span>第五级菜单 </h2>
                                            <ul>
                                                <li>
                                                    <h2> 第六级菜单 </h2>
                                                </li>
                                                <li>
                                                    <h2> 第六级菜单 </h2>
                                                </li>
                                                <li>
                                                    <h2> 第六级菜单 </h2>
                                                </li>
                                                <li>
                                                    <h2> 第六级菜单 </h2>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                        	<h2> 第五级菜单 </h2>
                                        </li>
                                        <li>
                                        	<h2> 第五级菜单 </h2>
                                        </li>
                                        <li>
                                        	<h2> 第五级菜单 </h2>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                               		<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                            </ul>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                            <h2><span>+</span> 第三级菜单 </h2>
                            <ul>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                            </ul>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
            </ul>
        </li>
        <li>
            <h2><span>+</span> 第一级菜单 </h2>
            <ul>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
            </ul>
        </li>
        <li>
            <h2><span>+</span> 第一级菜单 </h2>
            <ul>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                            <h2><span>+</span> 第三级菜单 </h2>
                            <ul>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                            </ul>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
            </ul>
        </li>
        <li>
            <h2><span>+</span> 第一级菜单 </h2>
            <ul>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                            <h2><span>+</span> 第三级菜单 </h2>
                            <ul>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                                <li>
                                	<h2> 第四级菜单 </h2>
                                </li>
                            </ul>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2><span>+</span> 第二级菜单 </h2>
                    <ul>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                        <li>
                        	<h2> 第三级菜单 </h2>
                        </li>
                    </ul>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
                <li>
                	<h2> 第二级菜单 </h2>
                </li>
            </ul>
        </li>
    </ul>

***CSS代码***

ul, h2 {margin: 0;padding: 0;}
    li {list-style: none;}
    #nav {border: 1px solid #333;float: left;padding: 5px 0;background: #ccf;}
    #nav ul {padding-left: 20px;display: none;}
    #nav h2 {font-size: 16px;height: 25px;line-height: 25px;padding: 0 15px;}

***JavaScript代码***