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

最新推荐文章于 2024-08-14 15:07:03 发布

world_er

最新推荐文章于 2024-08-14 15:07:03 发布

阅读量1.1w

点赞数

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

本文链接：https://blog.csdn.net/world_er/article/details/50386499

版权

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

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

效果图
这里写图片描述

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">
                <s