jquery 折叠菜单互不影响的实现 直接操作 dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 折叠菜单互不影响的实现 直接操作 dom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;}
body{padding:30px 200px;background: #666699;line-height: 32px;color:#330000;}
ul,li{list-style: none;}
.hide{background: #ddd;border:1px solid #bbb;display: none;float:left;}
li{border:1px solid #bbb;padding:0 10px;}
.menu-title{clear:both;width: 200px}
.menu-title,.hide li{cursor:pointer;}
.hide li:hover{color:#660099;background: #996666}
.hide1{display: block;}
</style>
</head>
<body>
<div class="container">
<div class="item">
<h3 class="menu-title">爱拼才会赢111</h3>
<ul class="hide hide1">
<li>一时失志不免怨叹</li>
<li>一时落魄不免胆寒</li>
<li>那通失去希望</li>
<li>每日醉茫茫</li>
</ul>
</div>
<div class="item">
<h3 class="menu-title">爱拼才会赢222</h3>
<ul class="hide">
<li>无魂有体亲像稻草人</li>
<li>人生可比是海上的波浪</li>
<li>有时起,有时落</li>
<li>好运,歹运</li>
</ul>
</div>
<div class="item">
<h3 class="menu-title">爱拼才会赢333</h3>
<ul class="hide">
<li>总嘛要照起工来行</li>
<li>三分天注定</li>
<li>七分靠打拼</li>
<li>爱拼才会赢</li>
</ul>
</div>
</div>
<!-- 脚本 -->
<script src="https://yuanqiao.pw/yqiao/static/js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('.menu-title').click(function(){
// 会互相影响的方式
// $(this).next('.hide').slideToggle().siblings('.hide').slideUp();
// 不互相影响的方式
$(this).next('.hide').slideToggle();
});
})();
</script>
</body>
</html>单页应用中折叠菜单互不影响的实现如 angualr 主要代码
<!-- 组件模板中 -->
<ul class="cd-navigation">
<li class="item-has-children" *ngFor="let item of menuArr; index as i">
<a href="javascript:;" class="item-has-title" (click)="toggleMenu('key'+i)">{{ item.lable }}</a>
</span>
<ul class="sub-menu" [style.height]="menuIndexObj['key'+i]||'auto'">
<li class="sub-menu-item" *ngFor="let subMenu of item.children">
<a href="javascript:;">{{ subMenu.lable }}</a>
</li>
</ul>
</li>
</ul>menuArr = [
{
lable: '一级菜单01',
children: [
{
lable: '二级菜单01',
},
{
lable: '二级菜单02',
}
]
},
{
lable: '一级菜单02',
children: [
{
lable: '二级菜单11',
},
{
lable: '二级菜单12',
}
]
}
]
menuIndexObj:any = {};
toggleMenu(key) {
this.menuIndexObj[key] = this.menuIndexObj[key]==='0'? 'auto': '0';
}
/*
若互相影响则会比较简单
模板中将
(click)="toggleMenu('key'+i)"
改为
(click)="toggleMenu(i)"
将
[style.height]="menuIndexObj['key'+i]||'auto'"
改为
[style.height]="currentIndex===i?'auto':'0'"
ts 中将
menuIndexObj:any = {};
toggleMenu(key) {
this.menuIndexObj[key] = this.menuIndexObj[key]==='0'? 'auto': '0';
}
改为
currentIndex = -1;
toggleMenu(i) {
this.currentIndex = this.currentIndex===i? -1: i;
}
*/style height 等于 auto 不支持过渡动画问题
// 新建一个动画的文件 menu-toggle.animation.ts
import {
trigger,
animate,
style,
transition,
state,
} from '@angular/animations';
export const MenuToggleAnimation = [
// 菜单伸缩
trigger('menuToggle', [
state(
'close',
style({
height: '0'
})
),
state(
'open',
style({
height: '*'
})
),
transition('open => close', animate('200ms ease-out')),
transition('close => open', animate('200ms ease-in')),
]),
];// 组件 ts 中引入动画
import { MenuToggleAnimation } from './menu-toggle.animation';
@Component({
...
animations: MenuToggleAnimation
})
...
toggleMenu(key) {
this.menuIndexObj[key] = this.menuIndexObj[key]==='close'? 'open': 'close';
}模板中
[style.height]="menuIndexObj['key'+i]||'auto'"
改为
[@menuToggle]="menuIndexObj['key'+i]||'open'"总结
jquery 直接操作dom就可以很方便的实现，页应用中主要是靠定义了一个 menuIndexObj 对象来存储每个 item 对应的值。默认是展开的，也可以默认关闭将 "menuIndexObj['key'+i]||'open'" 改为 "menuIndexObj['key'+i]||'close'" 即可
发表评论：