一个简单地可伸缩左侧导航栏

最新推荐文章于 2025-06-25 09:03:01 发布

world_er

最新推荐文章于 2025-06-25 09:03:01 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：插件文章标签： js 导航

本文链接：https://blog.youkuaiyun.com/world_er/article/details/50386499

插件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单可伸缩左侧导航栏，包括left.html和left.css两个文件，展示了如何通过JavaScript操作实现导航栏的动态效果，需要引入jQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
这里写图片描述

left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备预约</title>
     <link href="./css/style.css" rel="stylesheet" type="text/css"/>
     <script type="text/javascript" src="jquery-1.10.2.js" ></script>
</head>
<body>
    <!-- left 侧边栏 start -->
    <div id="left">
        <span class="navSpan" data-tags="1">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="1">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
                <span class="sonNavSpan"><a href="">子栏目3</a></span>
                <span class="sonNavSpan"><a href="">子栏目4</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="2">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="2">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
                <span class="sonNavSpan"><a href="">子栏目3</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="3">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="3">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="4">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="4">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="5">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="5">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="6">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="6">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="7">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="7">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>

        <span class="navSpan" data-tags="8">
            <a class="navLink" href="#">添加实验设备</a>
            <div class="sonNavsDiv" data-tags-div="8">
                <span class="sonNavSpan"><a href="">子栏目1</a></span>
                <span class="sonNavSpan"><a href="">子栏目2</a></span>
            </div>          
        </span>


    </div>
    <!-- left 侧边栏 end -->
</body>
<script>
    $(function(){

        var tags = 0;

        $(".navSpan").click(function(){
            var thisTags = $(this).data('tags');

            //判断是否已经打开一个子导航栏
            if(isSonNavOpen())
            {
                //判断是否和当前点击的是同一个
                if(tags == thisTags)        //是同一个，关闭该子导航
                {
                    closeSonNav(tags);
                }
                else                                    //不是同一个, 关闭旧的并打开一个新的
                {
                    closeSonNav(tags);
                    openSonNav(thisTags);
                }
            }
            else            //当前没有子导航打开，打开一个新的
            {
                openSonNav(thisTags);
            }

        });

        //判断是否已经打开一个子导航栏
        function isSonNavOpen()
        {
            if(tags != 0)       //已经打开
            {
                return true;
            }

            return false;
        }

        //打开一个子导航
        function openSonNav(thisTags)
        {
            var sonNavsDiv = $("div[data-tags-div="+ thisTags +"]");

            //显示子导航栏
            sonNavsDiv.css("display", "block");

            tags = thisTags;
        }

        //关闭一个子导航
        function closeSonNav(thisTags)
        {
            var sonNavsDiv = $("div [data-tags-div="+ thisTags +"]");

            sonNavsDiv.css("display", "none");  

            //关闭后把标记清0， 否则打开一个后，一直是已经打开状态
            tags = 0;
        }
    });
</script>
</html>

left.css

body{
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 1000px;
    height: 100%;
    background: #F4F4F4;
}

#left{
    background: #C6D9F1;
    height: 100%;
    float: left;
}
.navSpan{
    display: block;
    font-size: 40px;
    font-family: "黑体";
    margin-top: 30px;
    line-height: 55px;
}

.navSpan:hover{
    background: #8EB4E3;
}

.sonNavSpan{
    display: block;
    font-size: 30px;
    font-family: "黑体";
    margin-top: 15px;
    line-height: 35px;
}

.sonNavSpan a{
    color: #5AD7F3;
    text-decoration: none;
}

.sonNavsDiv{
    display: none;
    margin-left: 30px;
}

.navLink{
    color: #fff;
    text-decoration: none;
}

#right{
    width: 750px;
}

#caozuoTable{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 100px;
    align: center;
    rules: rows;
}

注：需要导jQuery