目的:想做个像很多官方文档那样的帮助文件。
这部分实现的功能是:左边的导航栏下拉的操作。
<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 页面上就显示。
下面就是实现点击展示右边内容。