像官网帮助文档 --左边导航栏下拉操作

最新推荐文章于 2024-08-23 10:53:05 发布

寻找虫洞

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量151

点赞数

分类专栏：前端编程文章标签： html css js

本文链接：https://blog.csdn.net/weixin_43802477/article/details/111319760

版权

前端编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：想做个像很多官方文档那样的帮助文件。
这部分实现的功能是：左边的导航栏下拉的操作。

<head>
  <style>
    ul {
      list-style-type: none;
      padding: 0;
      width:200px;
    }
    li a {
      display: block;
      color:black;
      text-decoration: none;
    }
    li a:hover {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
<div >
    <a href="/docs/grafana/latest/">文章标题</a>
  </div>
    <ul>
      <li class="list" >
        <a  href="#">
          一级标题1
        </a>
      </li>
      
      <li class="list" onclick="show('xinwen')">
         <a href="#">一级标题2</a>
      </li>
        <ul class="erji" id="xinwen" style="display:none">
         <li :class="xiala" >
            <a href="#">二级标题</a>
        </li>
        </ul>
    </ul>
</div>
<script type="text/javascript">
  function show(id){
    var a=document.getElementById(id);
    if (a.style.display=="none"){
      a.style.display = "block";
    }
    else {
      a.style.display = "none";
    }
  }
</script>
</body>

html和css部分应该很好理解，js的逻辑关系也很简单。
当我点击 “一级目录2” 时会会触动 js 的时 show(id) 函数他会获取 id=xinwen 的标签， “a=document.getElementById(id)” 获取对象；下面一个if判断语句 a.style.display 就是 ul 标签的 display 是 none 话就将改为 block 否则改为 none 这样就达到点击展示再点击隐藏的效果。
display = none 标签页面就不展示，如果是 bolock 页面上就显示。
下面就是实现点击展示右边内容。

寻找虫洞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
像官网帮助文档 --左边导航栏下拉操作

目的：想做个像很多官方文档那样的帮助文件。<head> <style> ul { list-style-type: none; padding: 0; width:200px; } li a { display: block; color:black; text-decoration: none; } li a:hover { color: cornflo
复制链接

扫一扫