我的 OOP 不适用于我的菜单

Question

我尝试在 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;
            }

        });

   }

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

Answer 1

你的问题是关闭

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'一起使用