のjQuery：ディスターブのため申し訳ありませんエラー

Question

が、私は問題を抱えている..私はJavaScriptにjQueryの内のスクリプトを変換しようとしていますが、私はこの問題を得る：

「キャッチされない例外TypeError：プロパティを読み取ることができません「を追加

$("div.mainMenu li").click(function() { 
      var subId = $(this).attr("id"); 
      $("div.mainMenu").find("li.active").removeClass("active"); 
      $("div.mainMenu").find("li#" + subId).addClass("active"); 
      $("div.bottomMenu").find("ul").css('display', 'none'); 
      $("div.bottomMenu").find("ul." + subId).css('display', 'block'); 
     }); 

エラーと私のスクリプト：

[].forEach.call(document.querySelectorAll('div.mainMenu li'), function(el) { 
     el.addEventListener('click', function() { 
      // code 
      var subId = this.getAttribute("id"); 
    document.querySelector('div.mainMenu li.active').classList.remove('active'); 
    document.getElementById(subId).classList.add("active"); 
    document.querySelector("div.bottomMenu ul").style.display = 'none'; 
    document.querySelector("div.bottomMenu ul."+subId).style.display = 'block'; 


      }) }) 

オリジナルスクリプト（jqueryの）「未定義の "

どこにエラーがありますか？ これは部分的に動作しますが、サブメニューに問題があります。サブメニューが2番目のタブをクリックすると表示されますが、メニューの最初のタブに戻るとサブメニューが最初のサブメニューになります-menu + 2番目のサブメニュー！

ありがとうございました！私が戻る場合^^

Answer 1

(function(){ 
 
    //get the menu lis and convert to array for forEach usage 
 
    var mainMenuLi = toArray(document.querySelectorAll('div.mainMenu li')); 
 
    //get bottom menu and convert to array for forEach usage 
 
    var bottomMenuUl = toArray(document.querySelectorAll('div.bottomMenu ul')); 
 
    
 
    //extract this so can call just this method 
 
    function toArray (elements) { 
 
    return Array.prototype.map.call(elements, function (element) { 
 
     return element; 
 
    }); 
 
    } 
 
    
 
    function menuSelection (e) { 
 
    //if the id of the li does not match the clicked elements id, remove active 
 
    mainMenuLi.forEach(function (li) { 
 
     if (li.id === e.target.id) { 
 
     li.classList.add('active'); 
 
     } else { 
 
     li.classList.remove('active'); 
 
     } 
 
    }); 
 
    
 
    //if the id of the clicked element is not on the bottom menu ul, hide it 
 
    bottomMenuUl.forEach(function (ul) { 
 
     if (ul.classList.contains(e.target.id)) { 
 
     ul.style.display = 'block'; 
 
     } else { 
 
     ul.style.display = 'none'; 
 
     } 
 
    }); 
 
    } 
 
    
 
    //bind the click handler to all the lis 
 
    mainMenuLi.forEach(function (li) { 
 
    li.addEventListener('click', menuSelection); 
 
    }); 
 
})();

Answer 2

は、今では一部で動作し、そこに私は、サブメニューの負荷の良いメニューの2番目のタブをクリックすると、サブメニューの問題ですが、メニューの最初のタブでは、サブメニューは最初のサブメニュー+ 2番目のサブメニューです！

[].forEach.call(document.querySelectorAll('div.mainMenu li'), function(el) { 
    el.addEventListener('click', function() { 
     // code 
     var subId = this.getAttribute("id"); 
     document.querySelector('div.mainMenu li.active').classList.remove('active'); 
     document.getElementById(subId).classList.add("active"); 
     document.querySelector("div.bottomMenu ul").style.display = 'none'; 
     document.querySelector("div.bottomMenu ul."+subId).style.display = 'block'; 
    }) 
}) 

エラーはどこですか？私は理解していない、元のコードがバニラのjavascriptのようです！