用JS写一个网站树形菜单

先上效果图:
用JS写一个网站树形菜单_第1张图片

主体内容就是侧边展示的一二三级菜单,树形结构的。
前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级:


  树形菜单:  
  
  
  • 先锋写作
  • 小说散文
  • 诗风词韵
  • 真我风采
  • 视频贴图
  • 行行摄摄
  • Flash贴图
  • 我要买房
  • 楼市话题
  • 我要卖房
  • 租房心语
  • 二手市场
  • 红楼一梦
  • 笑话论坛
  • 休闲生活
  • 大话春秋

CSS样式很简单,根据个人喜好设置:

 

JS内容我们用原生的JS很简单就写出来了,用show方法,获取到我们点击的块级元素的ID,给它添加display的样式,用if else语句来判断状态显示:


这样就完成树形菜单的编辑了。
用JS写一个网站树形菜单_第2张图片

转载于:https://www.cnblogs.com/xiaobeiju/p/10224132.html

你可能感兴趣的:(用JS写一个网站树形菜单)