发表于： 2020-05-12 23:31:07
1 1823
今日完成
学的有点上头，学乱了，还把angularJs当angular学了半天
写了个angular组件
组件html
<ul class="nav">
<li class="nav-header" *ngFor="let item of navList">
<h3 (click)="clickFn($event)">{{ item.title }}</h3>
<dl class="nav-list">
<dd *ngFor="let val of item.list">
<h4>{{ val.title }}</h4>
</dd>
</dl>
</li>
</ul>
css
.nav {
width: 280px;
height: 500px;
border: 1px solid;
}
.nav-header {
overflow: hidden;
}
.nav-header h3 {
background-color: #bfa;
line-height: 40px;
}
.nav-list {
height: 0px;
transition: height 0.6s;
}
.nav-list dd {
margin: 0;
padding-left: 30px;
line-height: 30px;
}
.nav-list dd:hover {
background-color: #e1e5e7;
}
ts 片段
import { navList } from "./navList";
export class LeftMenuComponent implements OnInit {
navList: object = navList;
constructor() { }
ngOnInit(): void {
}
clickFn(event) {
let allList: any = document.getElementsByClassName('nav-list');
//获取当前点击dom节点
let thisList: any = event.target.nextSibling;
// 获取当先节点下的dd
let thisListItem: any = thisList.getElementsByTagName('dd');
// 排他 全部收起
for (var i = 0; i < allList.length; i++) {
allList[i].style.height = `0px`;
}
// 展开
thisList.style.height = 30 * thisListItem.length + "px";
}
}
//列表文件
export const navList = [
{
title: "一级标题1",
list: [
{ title: "二级标题" }
]
},
{
title: "一级标题2",
list: [
{ title: "二级标题" },
{ title: "二级标题" }
]
},
{
title: "一级标题3",
list: [
{ title: "二级标题" },
{ title: "二级标题" },
{ title: "二级标题" }
]
}
];
原生js的用法之前只是浅浅的了解了下，好多地方都不清楚，还需要多练习
返回列表
评论