网页三级菜单 html

最新推荐文章于 2023-10-30 18:44:29 发布

荒~

最新推荐文章于 2023-10-30 18:44:29 发布

阅读量697

点赞数

分类专栏： # HTML # css # jQuery 文章标签： html

本文链接：https://blog.csdn.net/qq_20869933/article/details/120032656

版权

jQuery 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

css

10 篇文章 1 订阅

订阅专栏

这是一个关于网页导航菜单的示例，使用HTML、CSS和JavaScript实现。菜单具有多级展开和收起功能，点击菜单项可以切换子菜单的显示状态。样式设计包括颜色、边框和背景图片，使得菜单具有清晰的视觉层次和交互反馈。

摘要由CSDN通过智能技术生成

<div class="list">

    <ul class="yiji">

        <li><a href="#">百度经验</a></li>

        <li><a href="#" class="inactive">百度经验</a>

            <ul>

                <li><a href="#" class="inactive active">百度经验</a>
                    <ul>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">百度经验</a></li>
            </ul>
        </li>
        <li><a href="#" class="inactive">百度经验</a>
            <ul style="display: none">
                <li><a href="#" class="inactive active">百度经验</a>
                    <ul>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                    </ul>
                </li>
                <li><a href="#" class="inactive active">百度经验</a>
                    <ul>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                        <li><a href="#">百度经验</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">百度经验</a></li>
            </ul>
        </li>
    </ul>
</div>


<style type="text/css">
    * {
        margin: 0;
        padding: 0
    }

    body {
        font-size: 12px;
        font-family: "宋体", "微软雅黑";
    }

    ul,
    li {
        list-style: none;
    }

    a:link,
    a:visited {
        text-decoration: none;
        color: #fff;
    }

    .list {
        width: 210px;
        border-bottom: solid 1px #316a91;
        margin: 40px auto 0 auto;
    }

    .list ul li {
        background-color: #467ca2;
        border: solid 1px #316a91;
        border-bottom: 0;
    }

    .list ul li a {
        padding-left: 10px;
        color: #fff;
        font-size: 12px;
        display: block;
        font-weight: bold;
        height: 36px;
        line-height: 36px;
        position: relative;

    }

    .list ul li .inactive {
        background: url(http://www.xwcms.net/webAnnexImages/fileAnnex/201605/58780/images/off.png) no-repeat 184px center;
    }

    .list ul li .inactives {
        background: url(http://www.xwcms.net/webAnnexImages/fileAnnex/201605/58780/images/on.png) no-repeat 184px center;
    }

    .list ul li ul {
        display: none;
    }

    .list ul li ul li {
        border-left: 0;
        border-right: 0;
        background-color: #6196bb;
        border-color: #467ca2;
    }

    .list ul li ul li ul {
        display: none;
    }

    .list ul li ul li a {
        padding-left: 20px;
    }

    .list ul li ul li ul li {
        background-color: #d6e6f1;
        border-color: #6196bb;
    }

    .last {
        background-color: #d6e6f1;
        border-color: #6196bb;
    }

    .list ul li ul li ul li a {
        color: #316a91;
        padding-left: 30px;
    }
</style>

<script type="text/javascript" src="http://zln.laowushangcheng.com/static/zln/js/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('.inactive').click(function () {

            if ($(this).siblings('ul').css('display') == 'none') {

                $(this).parent('li').siblings('li').removeClass('inactives');

                $(this).addClass('inactives');

                $(this).siblings('ul').slideDown(100).children('li');

                if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {

                    $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');

                    $(this).parents('li').siblings('li').children('ul').slideUp(100);

                }

            } else {

                //控制自身变成+

                $(this).removeClass('inactives');

                //控制自身菜单下子菜单隐藏

                $(this).siblings('ul').slideUp(100);

                //控制自身子菜单变成+

                $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');

                //控制自身菜单下子菜单隐藏

                $(this).siblings('ul').children('li').children('ul').slideUp(100);

                //控制同级菜单只保持一个是展开的（-显示）

                $(this).siblings('ul').children('li').children('a').removeClass('inactives');

            }

        })

    });

</script>