Jquery做的二级菜单

功能目标：列出二级菜单，点击某个菜单其他菜单均关闭，次菜单改变状态（即若为关闭则变为打开，若为打开则关闭）。

自我评价：写的有点儿初级，但是我们的目标是规范代码、更精简、更简单。

HTML部分：

 

<div style="width: 100px;">
        <div id="MM">
            <a>第一个菜单</a>
            <div class="Menu">
                <ul>
                    <li>子菜单1</li>
                    <li>子菜单1</li>
                </ul>
            </div>
            <a>第二个菜单</a>
            <div class="Menu">
                <ul>
                    <li>子菜单2</li>
                    <li>子菜单2</li>
                </ul>
            </div>
            <a>第三个菜单</a>
            <div class="Menu">
                <ul>
                    <li>子菜单3</li>
                    <li>子菜单3</li>
                    <li>子菜单3</li>
                </ul>
            </div>
         </div>
    </div>

Jquery部分代码：

    <script type="text/javascript">
        $(document).ready(function() {
            $("a").click(function() {
            $(".Menu").not($(this).next(".Menu")).slideUp("fast");//除去a的下一个div页面其他div变为隐藏。。。
                $(this).next(".Menu").slideToggle("fast");//所选div改变显示状态
            });
        });
    </script>

Css代码：

   <style type="text/css">
        .Menu
        {
            display: none;
        }
    </style>

css只有一句，即初次加载时所有菜单关闭状态。

 

Jquery的选择器非常强大，如果运用自如使其更好的配合定会大大减少代码量，使代码清晰简单。

 

我发的第一篇文章，希望大家不要扔臭鸡蛋...........