научите пользоваться массивами!!!!
Написал скрипт для выпадающего меню. Код работает коректно но очень большой. Объясните можно ли сделать тожесамое с помощю масива !
(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");
};
})();
|
(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>
|
| Часовой пояс GMT +3, время: 21:58. |