Menu.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 = $horizontalMenu.height(),
  46. horizontalMenuTop = $horizontalMenu.offset().top + 15;
  47. // 重新计算高度
  48. let resize = function () {
  49. if (! $('.horizontal-menu').length) {
  50. return;
  51. }
  52. let height = $horizontalMenu.height(),
  53. diff = height - defaultHorizontalMenuHeight,
  54. $wrapper = $('.horizontal-menu.navbar-fixed-top .content-wrapper');
  55. if (height <= defaultHorizontalMenuHeight) {
  56. return $wrapper.css({'padding-top': horizontalMenuTop + 'px'});
  57. }
  58. $wrapper.css({'padding-top': (horizontalMenuTop + diff) + 'px'});
  59. };
  60. window.onresize = resize;
  61. resize();
  62. }
  63. }