(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版

这是上一篇文章的改进。

上一篇文章的左侧菜单是没有子目录的。

这是效果图:

主要改动:

对样式进行删减和优化。

重点就是js部分了。

点击一级目录时二级目录的第一个元素默认active,即在点击一级目录时可以立刻请求接口获取第一个子元素的数据,当点击第二个元素时再获取第二个子元素的数据。

再结合加载图使用,就更好了。

代码如下:

HTML:

<div class="wrap">
<ul class="left">
<li class="ma-li">
<p>大分类</p>
<ul>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
</ul>
</li>
<li class="ma-li">
<p>大分类</p>
<ul>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
</ul>
</li>
<li class="ma-li">
<p>大分类</p>
<ul>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
</ul>
</li>
<li class="ma-li">
<p>大分类</p>
<ul>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
</ul>
</li>
<li class="ma-li">
<p>大分类</p>
<ul>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
<li class="pa-li">小分类</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
<li class="right-list">水果</li>
</ul>
</div>

CSS:

*{
margin:;
padding:;
list-style: none;
}
html,body{
height: 100%
}
.wrap{
height: 100%;
display: flex;
}
.left{
width: 30%;
height: 100%;
overflow-y: auto;
color: #7a7a7a;
}
.right{
flex:;
height: 100%;
overflow-y: auto;
color: #373737;
} .ma-li,.pa-li,.right-list{
font-size: 16px;
line-height: 45px;
}
.ma-li p,.right-list{
padding-left: 20px;
border-bottom: 1px solid #e5e2dc;
}
.ma-li.active p{
border-left: 5px solid #1657c9;
padding-left: 15px;
}
.ma-li.active ul{
border-bottom: 1px solid #e5e2dc;
}
.pa-li{
padding-left: 20px;
}
.pa-li.active{
color: #1657c9
}

JAVASCRIPT:

var _leftMain = document.getElementsByClassName('left')[0];
var _leftMaLi = _leftMain.getElementsByClassName('ma-li');
var _leftMaliUl = _leftMain.getElementsByTagName('ul');
var index = 0;
for(var i = 0;i<_leftMaLi.length;i++){
_leftMaLi[i]['data-index'] = i
if(_leftMaLi[i].className.indexOf('active')==-1){
_leftMaliUl[i].style.display = 'none'
}
_leftMaLi[i].onclick = function (event){
event = event||window.event;
if(event.target.tagName == 'P'){
this.className += ' active';
index = this['data-index']
_leftMaliUl[index].style.display = 'block'
var liChilds = this.getElementsByClassName('pa-li');
liChilds[0].className += ' active'
for(var i = 1;i<liChilds.length;i++){
liChilds[i].className = liChilds[i].className.replace('active', '')
}
updateOtherMaLi()
}else if(event.target.tagName == 'LI'){
var allLi = event.target.parentNode.children;
for(var j = 0;j<allLi.length;j++){
allLi[j].className = allLi[j].className.replace('active', '')
}
event.target.className += ' active'
}
}
}
function updateOtherMaLi(){
for(var i = 0;i<_leftMaLi.length;i++){
if(i!=index){
_leftMaLi[i].className = _leftMaLi[i].className.replace('active','')
_leftMaliUl[i].style.display = 'none'
}
}
}
_leftMaLi[index].className += ' active'
_leftMaLi[index].getElementsByClassName('pa-li')[0].className += ' active'
_leftMaliUl[index].style.display = 'block'

左侧菜单栏右侧内容(改进,有js效果)的更多相关文章

  1. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  2. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  3. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  4. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  5. HTML实用案例(1)—— 左侧菜单,右侧内容的布局(带左侧菜单点击隐藏显示效果)

    效果图 代码部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  6. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 左侧栏与右侧内容之锚点、offsetHeight、scrollTop()

    常用功能 1.点击左侧,右侧相关内容随时点到. 2.滚动右侧信息,左侧标题随之显示背景. 第一点很简单,只要在左侧栏  <li><a  href="#aaa"&g ...

  8. jquery小效果:新浪游戏右侧导航菜单 (页面效果)

    偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...

  9. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

随机推荐

  1. P2580 于是他错误的点名开始了(trie)

    P2580 于是他错误的点名开始了 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉 ...

  2. Java Spring Controller 获取请求参数的几种方法

    技术交流群:233513714  1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"=& ...

  3. PowerDesigner如何将一个包里的表拷贝到另一个表以后在视图中也可以显示?

    第一步:选中PhysicalDiagram_1 第二步:点击:“ Symbol”按钮, 第三步:点击“Show Symbols”,出现如下界面 第四步:选中State.  

  4. 玩转Node.js(二)

    玩转Node.js(二) 先来回顾上次的内容,上一次我们使用介绍了Node.js并写了第一个服务器端的Hello World程序,在这个Hello World程序中,请求自带的http模块并将其赋给h ...

  5. Vue_自定义指令

    关于Vue的自定义指令: - 在Vue中除了核心功能默认内置的指令(v-model & v-show) - Vue也允许注册自定义指令. 注意,在 Vue2.0 中,代码复用和抽象的主要形式是 ...

  6. 孤荷凌寒自学python第十六天python的迭代对象

    孤荷凌寒自学python第十六天python的迭代对象 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 迭代也就是循环. python中的迭代对象有相关的如下几个术语: A容器 contrai ...

  7. (笔记) RealTimeRender[实时渲染] C3

    @author: 白袍小道 转载表明,查看随缘 前言: 从历史上看,图形加速始于每个像素扫描线上的插值颜色重叠一个三角形,然后显示这些值.包括访问图像数据允许纹理应用于表面.添加硬件 插入和测试z深度 ...

  8. 关于 vee-validate直接引用的方法

    转载于:https://blog.csdn.net/hy111/article/details/79046500?%3E 由于当前项目使用的是基于jQuery的前端结构,尝试在新增需求中使用VUE2, ...

  9. 六、OCP 开闭原则

    OCP原则:“对扩展开放,对修改关闭” 这句话是简述,其实隐藏了重要的主语.真正的意义是:对使用者修改关闭,对提供者扩展开放. 例如: class A 和 class B.A调用了B的一个方法,那么A ...

  10. thinkphp中dump()方法

    dump ThinkPHP 框架 自定义的  用作框架变量 调试用的输出 功能可以说和 var_dump一样的