下拉列表菜单

内容

 

建立下拉列表需要显示的元素

<div class="wrap">

        <ul>

            <li>

                <a href="javascript:void(0);">一级菜单1</a>

                <ul class="ul">

                    <li><a href="javascript:void(0);">二级菜单11</a></li>

                    <li><a href="javascript:void(0);">二级菜单12</a></li>

                    <li><a href="javascript:void(0);">二级菜单13</a></li>

                </ul>

            </li>

            <li>

                <a href="javascript:void(0);">一级菜单2</a>

                <ul>

                    <li><a href="javascript:void(0);">二级菜单21</a></li>

                    <li><a href="javascript:void(0);">二级菜单22</a></li>

                    <li><a href="javascript:void(0);">二级菜单23</a></li>

                </ul>

            </li>

            <li>

                <a href="javascript:void(0);">一级菜单3</a>

                <ul>

                    <li><a href="javascript:void(0);">二级菜单31</a></li>

                    <li><a href="javascript:void(0);">二级菜单32</a></li>

                    <li><a href="javascript:void(0);">二级菜单33</a></li>

                </ul>

            </li>

        </ul>

为我们设置好的元素设置好css样式

<style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .wrap {

            width: 330px;

            height: 30px;

            margin: 100px auto 0;

            padding-left: 10px;

            background-image: url('../../Content/imgs/bg.jpg');

        }

            .wrap li {

                background-image: url('../../Content/imgs/libg.jpg');

            }

            .wrap > ul > li {

                float: left;

                margin-right: 10px;

                position: relative;

            }

            .wrap a {

                display: block;

                height: 30px;

                width: 100px;

                text-decoration: none;

                color: #000;

                line-height: 30px;

                text-align: center;

            }

            .wrap li ul {

                position: absolute;

                top: 30px;

                display: none;

            }

</style>

带入jQuery插件

<script src="~/Content/js/jquery-3.2.1.min.js"></script>

把".wrap>ul>li"使用jQuery方法带入鼠标进入，离开事件

    <script>

        $(function () {

//mouseenter:鼠标进入事件

//mouseleave：鼠标离开事件

            var $li = $(".wrap>ul>li");

//给li注册鼠标进入事件，让自己的ul显示出来

            $li.mouseenter(function () {

//找到所有的儿子元素，并且还得是ul

//stop：停止当前正在执行的动画

                $(this).children("ul").stop().slideDown();

            });

            $li.mouseleave(function () {

                $(this).children("ul").stop().slideUp();

            });

        });

总结:这次的案例主要掌握鼠标进入(mouseenter)和离开(mouseleave)事件，下拉slideDown();,收起slideUp();这几个方法，还有在收起和下拉的使用方法前加上一个stop()不然上一个为执行完下一个跟着一起执行，这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！