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

     }); 

    } 

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 

     } 

여기

당신이 VAR 키 1, 2, 세 개의 변수를 선언합니다. 이러한 변수는 Menu 생성자에서만 볼 수 있으며 'this'키워드로 선언하고 'this'와 함께 사용하십시오