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

这是上一篇文章的改进。

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

这是效果图:

主要改动:

对样式进行删减和优化。

重点就是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. PHP.16-PDO

    PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口.实现 PDO 接口的每个数据库驱动可以公开具体数据库的特性作为标准扩展功能. 注意利用 PDO 扩展自身并不能实现任何数 ...

  2. 10.2 ajax

    Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互 ...

  3. SpringMVC集成RSA加密算法

    技术交流群: 233513714 本文介绍的是RSA加密算法+Spring Security在SpringMVC中的集成使用. Spring Security是什么? 引用: Spring Secur ...

  4. mysql 中的基本用法,以及日期的转换

    1.mysql int(10) int 类型长度4个字节,大约表示2^32数字,10代表的是显示长度,一般和FILLZERO约束一起使用,如果没有达到该长度,填充02-->000000002 m ...

  5. 阿里云ECS Ubuntu安装PHP+Mysql+Apache+Nginx+Redis+Discuz

    http://www.linuxdiyf.com/linux/13662.html http://blog.csdn.net/wangnan537/article/details/47868659 h ...

  6. 打包成apk,生成apk文件,上传到网站服务器提供链接下载

    Android开发把项目打包成apk: 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android ...

  7. github+git提交 基础用法

    git版本管理基本用法: 安装就不用说了 随便一搜 安装完 妥妥的.下边说的是在github从新建一个项目开始: 1.首先打开自己的github地址,如下图所示 点加号 选 New repositor ...

  8. python 3 直接使用reload函数报错

    reload()是python2 的内置函数可以直接使用,但是python3 直接使用此函数报错,需要导入importlib 模块 from importlib import reload

  9. python-成员修饰符

    python的面相对象中,拥有3个成员,字段.方法.属性 class Foo: def __init__(self,name): #公有字段name在类中与类外均能调用 self.name = nam ...

  10. HA集群基本概念详解

    一.高可用集群的定义 二.高可用集群的衡量标准 三.高可用集群的层次结构 四.高可用集群的分类 五.高可用集群常用软件 六.共享存储 七.集群文件系统与集群LVM 八.高可用集群的工作原理 一.高可用 ...