Menu.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. export default class Menu {
  2. constructor(Dcat) {
  3. this.init();
  4. this.initHorizontal();
  5. }
  6. // 菜单点击选中效果
  7. init() {
  8. if (! $('.main-sidebar .sidebar').length) {
  9. return;
  10. }
  11. // 滚动条优化
  12. new PerfectScrollbar('.main-sidebar .sidebar');
  13. let $content = $('.main-menu-content'),
  14. $items = $content.find('li'),
  15. $hasSubItems = $content.find('li.has-treeview');
  16. $items.find('a').click(function () {
  17. let href = $(this).attr('href');
  18. if (! href || href === '#') {
  19. return;
  20. }
  21. $items.find('.nav-link').removeClass('active');
  22. // $hasSubItems.removeClass('menu-open');
  23. $(this).addClass('active')
  24. });
  25. }
  26. initHorizontal() {
  27. let selectors = {
  28. item: '.horizontal-menu .main-menu-content li.nav-item',
  29. link: '.horizontal-menu .main-menu-content li.nav-item .nav-link',
  30. };
  31. $(selectors.item).on('mouseover', function () {
  32. $(this).addClass('open')
  33. }).on('mouseout', function () {
  34. $(this).removeClass('open')
  35. });
  36. $(selectors.link).on('click', function () {
  37. let $this = $(this);
  38. $(selectors.link).removeClass('active');
  39. $this.addClass('active');
  40. $this.parents('.dropdown').find('.nav-link').eq(0).addClass('active');
  41. $this.parents('.dropdown-submenu').find('.nav-link').eq(0).addClass('active')
  42. });
  43. // 自动计算高度
  44. let $horizontalMenu = $('.horizontal-menu .main-horizontal-sidebar'),
  45. defaultHorizontalMenuHeight = 0,
  46. horizontalMenuTop = 0;
  47. // 重新计算高度
  48. let resize = function () {
  49. if (! $('.horizontal-menu').length) {
  50. return;
  51. }
  52. if (! defaultHorizontalMenuHeight) {
  53. defaultHorizontalMenuHeight = $horizontalMenu.height()
  54. }
  55. if (! horizontalMenuTop) {
  56. horizontalMenuTop = $horizontalMenu.offset().top + 15;
  57. }
  58. let height = $horizontalMenu.height(),
  59. diff = height - defaultHorizontalMenuHeight,
  60. $wrapper = $('.horizontal-menu.navbar-fixed-top .content-wrapper');
  61. if (height <= defaultHorizontalMenuHeight) {
  62. return $wrapper.css({'padding-top': horizontalMenuTop + 'px'});
  63. }
  64. $wrapper.css({'padding-top': (horizontalMenuTop + diff) + 'px'});
  65. };
  66. window.onresize = resize;
  67. resize();
  68. }
  69. }