научите пользоваться массивами!!!!

[Вася Задунайский]

Написал скрипт для выпадающего меню. Код работает коректно но очень большой. Объясните можно ли сделать тожесамое с помощю масива !

(function ret(){
   var elem1 = document.getElementById("elementMenyu1");
var open1 = document.getElementById("openingBlock1");
     var elem2 = document.getElementById("elementMenyu2");
var open2 = document.getElementById("openingBlock2");
     var elem3 = document.getElementById("elementMenyu3");
var open3 = document.getElementById("openingBlock3");
     var elem4 = document.getElementById("elementMenyu4");
var open4 = document.getElementById("openingBlock4");
     var elem5 = document.getElementById("elementMenyu5");
var open5 = document.getElementById("openingBlock5");
     var elem6 = document.getElementById("elementMenyu6");
var open6 = document.getElementById("openingBlock6");
     var elem7 = document.getElementById("elementMenyu7");
var open7 = document.getElementById("openingBlock7");
     var elem8 = document.getElementById("elementMenyu8");
var open8 = document.getElementById("openingBlock8");
    
    elem1.onmouseover = function(){
        open1.classList.add("heighters1");
    };
    elem1.onmouseout = function(){
        open1.classList.remove("heighters1");
    };
    open1.onmouseover = function(){
        open1.classList.add("heighters1");
    };
    open1.onmouseout = function(){
        open1.classList.remove("heighters1");
    };
    
    
      elem2.onmouseover = function () {
        open2.classList.add("heighters1");
    };
    elem2.onmouseout = function () {
        open2.classList.remove("heighters1");
    };
    open2.onmouseover = function () {
        open2.classList.add("heighters1");
    };
    open2.onmouseout = function () {
        open2.classList.remove("heighters1");
    };
    
    
      elem3.onmouseover = function () {
        open3.classList.add("heighters1");
    };
    elem3.onmouseout = function () {
        open3.classList.remove("heighters1");
    };
    open3.onmouseover = function () {
        open3.classList.add("heighters1");
    };
    open3.onmouseout = function () {
        open3.classList.remove("heighters1");
    };
    
    
      elem4.onmouseover = function () {
        open4.classList.add("heighters1");
    };
    elem4.onmouseout = function () {
        open4.classList.remove("heighters1");
    };
    open4.onmouseover = function () {
        open4.classList.add("heighters1");
    };
    open4.onmouseout = function () {
        open4.classList.remove("heighters1");
    };
    
    
    
    
     elem5.onmouseover = function () {
        open5.classList.add("heighters");
    };
    elem5.onmouseout = function () {
        open5.classList.remove("heighters");
    };
    open5.onmouseover = function () {
        open5.classList.add("heighters");
    };
    open5.onmouseout = function () {
        open5.classList.remove("heighters");
    };
    
    
    
     elem6.onmouseover = function () {
        open6.classList.add("heighters");
    };
    elem6.onmouseout = function () {
        open6.classList.remove("heighters");
    };
    open6.onmouseover = function () {
        open6.classList.add("heighters");
    };
    open6.onmouseout = function () {
        open6.classList.remove("heighters");
    };
    
    
    
    elem7.onmouseover = function () {
        open7.classList.add("heighters1");
    };
    elem7.onmouseout = function () {
        open7.classList.remove("heighters1");
    };
    open7.onmouseover = function () {
        open7.classList.add("heighters1");
    };
    open7.onmouseout = function () {
        open7.classList.remove("heighters1");
    };
    
    
    
     elem8.onmouseover = function () {
        open8.classList.add("heighters1");
    };
    elem8.onmouseout = function () {
        open8.classList.remove("heighters1");
    };
    open8.onmouseover = function () {
        open8.classList.add("heighters1");
    };
    open8.onmouseout = function () {
        open8.classList.remove("heighters1");
    };
    
    
    
})();

[Cuntmann]

(function(){
var elems=document.querySelectorAll('[id^="elementMenyu"]');
	
[].forEach.call(elems,function(X){
var n=X.id.replace(/[^\d]+/g,''),
    op=document.querySelectorAll('#openingBlock'+n);

X.onmouseover=function(){op.classList.add("heighters1");};
X.onmouseout=function(){op.classList.remove("heighters1");};
op.onmouseover=function(){this.classList.add("heighters1");};
op.onmouseout=function(){this.classList.remove("heighters1");};
});
})();

[Вася Задунайский]

Из подсмотреного смастерил но неработает как надо. Начинает работать только после второго наведения курсора на элемент!! ????????????
Помгите разобратся.

<html lang="en">
<body>
  <style>
      .elem{
          width:12%;
          height:50px;
          background-color: red;
          display: inline-block;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
}
      .open{
        height: 0px;
          background-color: aqua;
          text-align: center;
          line-height: 150px;
          overflow: hidden;
          transition: all 1s;

      }
      .height{
          height:150px;
          border: 1px solid red;
          text-align: center;
          line-height: 150px;
      }
  </style>
  
  
   <div class="elem" id="elemMenu1">1</div>
   <div class="elem" id="elemMenu2">2</div>
   <div class="elem" id="elemMenu3">3</div>
   <div class="elem" id="elemMenu4">4</div>
   <div class="elem" id="elemMenu5">5</div>
   <div class="elem" id="elemMenu6">6</div>
   <div class="elem" id="elemMenu7">7</div>
   <div class="elem" id="elemMenu8">8</div>
   
   <div class="open" id="opener1">1</div>
   <div class="open" id="opener2">2</div>
   <div class="open" id="opener3">3</div>
   <div class="open" id="opener4">4</div>
   <div class="open" id="opener5">5</div>
   <div class="open" id="opener6">6</div>
   <div class="open" id="opener7">7</div>
   <div class="open" id="opener8">8</div>
    
    <script>
    (function () {
     
        
    var divs2 = document.querySelectorAll("div.open");
    var divs = document.querySelectorAll("div.elem");
    var handler = function() {
        var index = Array.prototype.indexOf.call(divs, this);
        
        divs[index].onmouseover = function(){
         divs2[index].classList.add("height");
    };
     divs[index].onmouseout = function(){
        divs2[index].classList.remove("height");
    };
         divs2[index].onmouseover = function(){
        divs2[index].classList.add("height");
    };
     divs2[index].onmouseout = function(){
        divs2[index].classList.remove("height");
    };
    }
    for (var i = 0; i < divs.length; i++) {
       divs[i].onmouseover = handler;
    }
  }());
    
    
    </script>
    
</body>
</html>

[рони]

Вася Задунайский,

<html lang="en">
<body>
  <style>
      .elem{
          width:12%;
          height:50px;
          background-color: red;
          display: inline-block;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
}
      .open{
        height: 0px;
          background-color: aqua;
          text-align: center;
          line-height: 150px;
          overflow: hidden;
          transition: all 1s;

      }
      .height{
          height:150px;
          border: 1px solid red;
          text-align: center;
          line-height: 150px;
      }
  </style>


   <div class="elem" id="elemMenu1">1</div>
   <div class="elem" id="elemMenu2">2</div>
   <div class="elem" id="elemMenu3">3</div>
   <div class="elem" id="elemMenu4">4</div>
   <div class="elem" id="elemMenu5">5</div>
   <div class="elem" id="elemMenu6">6</div>
   <div class="elem" id="elemMenu7">7</div>
   <div class="elem" id="elemMenu8">8</div>

   <div class="open" id="opener1">1</div>
   <div class="open" id="opener2">2</div>
   <div class="open" id="opener3">3</div>
   <div class="open" id="opener4">4</div>
   <div class="open" id="opener5">5</div>
   <div class="open" id="opener6">6</div>
   <div class="open" id="opener7">7</div>
   <div class="open" id="opener8">8</div>

    <script>
    (function () {
    var open = document.querySelectorAll("div.open");
    var elem = document.querySelectorAll("div.elem");
    [].forEach.call(elem, function(item, i) {
            item.addEventListener('mouseover', function() {
                open[i].classList.add("height");
            });
            item.addEventListener('mouseout', function() {
                open[i].classList.remove("height");
            });
            open[i].addEventListener('mouseover', function() {
                open[i].classList.add("height");
            });
            open[i].addEventListener('mouseout', function() {
                open[i].classList.remove("height");
            });
        });
  }());


    </script>

</body>
</html>