Menu.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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 resize = function () {
  45. if (! $('.horizontal-menu').length) {
  46. return;
  47. }
  48. let defaultHorizontalMenuHeight = 55,
  49. height = $('.horizontal-menu .main-horizontal-sidebar').height(),
  50. diff = height - defaultHorizontalMenuHeight,
  51. $wrapper = $('.horizontal-menu.navbar-fixed-top .content-wrapper');
  52. if (height <= defaultHorizontalMenuHeight) {
  53. return $wrapper.css({'padding-top': '80px'});
  54. }
  55. $wrapper.css({'padding-top': (80 + diff) + 'px'});
  56. };
  57. window.onresize = resize;
  58. resize();
  59. }
  60. }