用Jquery实现下拉列表

用Jquery实现下拉列表

首先是HTML样式，这里用UL无序列表来做

<ul id="ul">
        <li>
            <h1>下拉菜单1</h1>
            <ul>
                <li>111</li>
                <li>111</li>
            </ul>
        </li>
        <li>
            <h1>下拉菜单2</h1>
            <ul>
                <li>222</li>
                <li>222</li>
            </ul>
        </li>
        <li>
            <h1>下拉菜单3</h1>
            <ul>
                <li>333</li>
                <li>333</li>
            </ul>
        </li>
    </ul>

接下来是css样式

<style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #ul>li>ul{
            display: none;
        }
    </style>

重点来了，jq的代码

<script>
        $("#ul>li>h1").click(function(){
            $(this).next().slideDown(2000);
            $(this).parent().siblings().find("ul").slideUp(2000)
        })
    </script>

首先给予每个h1一个点击事件
当点击h1时，它的相邻下一个兄弟元素以2000毫秒的速度下拉，
当我们点击另一个h1时，其他的h1的兄弟元素下的ul无序列表以2000毫秒的速度上滑。
slideDown，slideUp是jq的动画效果，还有淡入淡出，隐藏显示效果，下期会讲解jq的其他动画效果。