css+jquery导航列表

最新推荐文章于 2020-06-22 06:24:51 发布

无盐海

最新推荐文章于 2020-06-22 06:24:51 发布

阅读量1k

点赞数

分类专栏： JQuery CSS

本文链接：https://blog.csdn.net/Fanbin168/article/details/45116041

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

《1》

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>导航列表</title>
    <script src="jquery-1.11.2.js"></script>
    <link href="jquery.autocompleter.css" rel="stylesheet" />
    <script src="jquery.autocompleter.js"></script>
</head>
<body>
    <ul class="list">
        <li>
            导航列表
            <ul class="anv">
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
            </ul>
        </li>
        <li>
            导航列表
            <ul class="anv">
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
            </ul>
        </li>
        <li>
            导航列表
            <ul class="anv">
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
            </ul>
        </li>
        <li>
            导航列表
            <ul class="anv">
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
            </ul>
        </li>
        <li>
            导航列表
            <ul class="anv">
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
                <li>导航列表</li>
            </ul>
        </li>
    </ul>
</body>
</html>

    <style type="text/css">
        .list {
            margin: 50px auto;
            width: 750px;
            padding:0px;
            color: #fff;
        }

        .list li {
            margin: 0px auto;
            padding: 0px;
            float: left;
            background-color: #171111;
            line-height: 35px;
            text-align: center;
            list-style: none;
            height: 35px;
            font-size: 15px;
            width: 150px;                            
        }
    </style>

<script type="text/javascript">
    $(function () {
        $(".anv").parent().find(".anv").css({ "list-style": "none", "margin": "0px", "padding": "0px", "display": "none", "color": "orange" });  //首先隐藏clas=anv的ul

        $(".list li").hover(
            function () { $(this).find(".anv").slideDown(400) }, //当时鼠标移入到$(.list li)上面的时候滑动显示出class=.anv的ul
            function () { $(this).find(".anv").stop(true).slideUp(400)} //离开的时候立即使用stop(true)方法来停止动画，然后又使用slideUp这个动画将class=anv的ul收起来（隐藏）
        );
    })
</script>