jQuery和单页应用中折叠菜单互不影响的实现对比

2020-2-18 Jon js+jquery+ajax

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'" 即可

标签: jquery angular 单页应用 折叠 菜单

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap