Мой OOP не работает с моим меню

Question

Я попытался сделать меню в OOP Javascript, чтобы предотвратить повторяемый код. У меня есть два элемента меню «toggleBtn» для значка Desktop Burger и «toggleBtnMobile» для значка Mobile Bruger.

Проблема прямо сейчас: она не работает.

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; 
      } 

     }); 

    } 

Important notice: I don't need any framework regarding menu toggeling. I'm learning at the moment.

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 

     } 

здесь вы объявили один, два и три переменные с ключом вар. эти переменные можно увидеть только в конструкторе меню, объявить их с помощью этого «ключевого слова» и использовать их с «этим»