我的 OOP 不适用于我的菜单



我试图用OOP Javascript制作菜单以防止可重复的代码。我有两个菜单元素"toggleBtn"用于桌面汉堡图标和"toggleBtnMobile"用于移动布鲁格图标。

现在的问题是:它不起作用。

 var $this = $(this),
      $navSidebar = $('#navSidebar'),
      $navDlrz = $('#navDlrz'),
      $toggleBtn = $('#toggleBtn'),
      $toggleBtnMobile = $('#toggleBtnMobile'),
      $menuHasChildren = $('.menu-item-has-children'),
      $subMenu = $menuHasChildren.find('ul.sub-menu');
  // Menu class
  function Menu(menu) {
            this.menu = menu;
            var one = menu.children().eq(1); // Burger Icons top bar
            var two = menu.children().eq(2); // Burger Icons middle bar
            var three = menu.children().eq(3); // Burger Icons bottom bar
       }

// When the Nav is clicked, the burger Icon transforms into "X"
   Menu.prototype.openNav = function() {
        one.addClass('One');
        two.addClass('Two');
        three.addClass('Three');
        $navSidebar.css('left', '0px');
        $navDlrz.css('left', '200px');
   };

 // Back to standard Icon
   Menu.prototype.closeNav = function() {
        one.removeClass('One');
        two.removeClass('Two');
        three.removeClass('Three');
        $navSidebar.css('left', '-200px');
        $navDlrz.css('left', '0px');
   }
Menu.prototype.toggleNav = function() { 
        menu.click(function() {
            var $this = $(this),
                $className = $this.attr('class');
            switch($className) {
                case 'navbar-toggle':
                    $this.addClass('open');
                    this.openNav();
                    break;
                case 'navbar-toggle open':
                    $this.removeClass('open');
                    $menuHasChildren.removeClass('open');
                    $menuHasChildren.find('ul.sub-menu').removeClass('open');
                    this.closeNav();
                    break;
            }
        });
   }

重要通知:我不需要任何关于菜单切换的框架。我现在正在学习。

你的问题是关闭

function Menu(menu) {
            this.menu = menu;
            var one = menu.children().eq(1); // Burger Icons top bar
            var two = menu.children().eq(2); // Burger Icons middle bar
            var three = menu.children().eq(3); // Burger Icons bottom bar
       }

在这里,您使用 var 键声明了一个、两个和三个变量。 这些变量只能在 Menu 构造函数中看到,用 'this' 关键字声明它们,并将它们与 'this' 一起使用

相关内容

  • 没有找到相关文章

最新更新