Помогите как написать небольшой скрипт..
<div class="box_1"> <li class="hav_sub" data-main-id="99">111</li> <li class="hav_sub" data-main-id="105">222</li> <li class="hav_sub" data-main-id="23">333</li> </div> <div class="box_2"> <div class="subcategory_box" data-id="99">aaa</div> <div class="subcategory_box" data-id="105">sss</div> <div class="subcategory_box" data-id="23">ddd</div> </div> Помогите написать скрипт.. c jqurey не сильно знаком.. Нужно при наведении на li.hav_sub data-main-id="99" добавить класс "open" для div.subcategory_box data-id="99" И соответственно убрать этот класс когда мы наводим на другой li с другим атрибутом.. Это получается как меню.. только оно в разных блоках... за ранее благодарен.. |
Вам наверно для всех li такое нужно
Типа такого.
<head>
<style>
.box_2 > div {
display: none;
}
.box_2 > div.open {
display: block;
}
</style>
</head>
<body>
<div class="box_1">
<ul>
<li class="hav_sub" data-main-id="99">111</li>
<li class="hav_sub" data-main-id="105">222</li>
<li class="hav_sub" data-main-id="23">333</li>
</ul>
</div>
<div class="box_2">
<div class="subcategory_box" data-id="99">aaa</div>
<div class="subcategory_box" data-id="105">sss</div>
<div class="subcategory_box" data-id="23">ddd</div>
</div>
<script>
const lis = document.querySelectorAll('.box_1 li')
for (const li of lis) {
li.addEventListener('mouseenter', ({target}) => {
const id = target.dataset.mainId;
const divs = document.querySelectorAll(`.subcategory_box`)
for (const div of divs)
div.classList.remove('open');
const div = document.querySelector(`.subcategory_box[data-id="${id}"]`)
div.classList.add('open')
})
}
</script>
|
nikoshot,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-id] {
display: none;
}
[data-id].open {
display: block;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let elem = document.querySelector(".box_1");
elem.addEventListener("mousemove", function({
target
}) {
target = target.closest("[data-main-id]");
if (target) {
let id = target.dataset.mainId;
let open = document.querySelector("[data-id].open")
if (open) open.classList.remove("open");
let sel = `[data-id="${id}"]`;
document.querySelector(sel).classList.add("open")
};
});
elem.addEventListener("mouseleave", function() {
let open = document.querySelector("[data-id].open")
if (open) open.classList.remove("open");
})
})
</script>
</head>
<body>
<div class="box_1">
<li class="hav_sub" data-main-id="99">111</li>
<li class="hav_sub" data-main-id="105">222</li>
<li class="hav_sub" data-main-id="23">333</li>
</div>
<div class="box_2">
<div class="subcategory_box" data-id="99">aaa</div>
<div class="subcategory_box" data-id="105">sss</div>
<div class="subcategory_box" data-id="23">ddd</div>
</div>
</body>
</html>
|
Почти то что нужно.. есть один нюанс. нужно что бы блок с классом "open" не закрывался когда мы на него переходим.. Вот тут набросал верстку и ваш код https://jsfiddle.net/mgohk37w/
Нужно что бы если мы перешли в открытый блок то что бы он не закрывался... Спасибо! |
nikoshot,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box {
display: flex;
}
.hav_sub,
.subcategory_box {
padding: 5px 15px;
}
.subcategory_box {
display: none;
}
.subcategory_box.open {
display: block;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let elem = document.querySelector(".box_1");
let timer;
elem.addEventListener("mousemove", function({
target
}) {
target = target.closest("[data-main-id]");
if (target) {
window.clearTimeout(timer);
let id = target.dataset.mainId;
let open = document.querySelector("[data-id].open")
if (open) open.classList.remove("open");
let sel = `[data-id="${id}"]`;
document.querySelector(sel).classList.add("open")
};
});
const hide = function() {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
let open = document.querySelector("[data-id].open");
if (open) open.classList.remove("open");
}, 200)
}
elem.addEventListener("mouseleave", hide);
let content = document.querySelector(".box_2");
content.addEventListener("mouseleave", hide);
content.addEventListener("mouseenter", function() {
window.clearTimeout(timer);
});
})
</script>
</head>
<body>
<div class="box">
<div class="box_1">
<li class="hav_sub" data-main-id="99">111111111111111111</li>
<li class="hav_sub" data-main-id="105">22222222222222222</li>
<li class="hav_sub" data-main-id="23">333333333333333333</li>
<li class="hav_sub" data-main-id="55">444444444444444444</li>
<li class="hav_sub" data-main-id="66">555555555555555555</li>
<li class="hav_sub" data-main-id="73">666666666666666666</li>
</div>
<div class="box_2">
<div class="subcategory_box" data-id="99">1111 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<div class="subcategory_box" data-id="105">222 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<div class="subcategory_box" data-id="23">333 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<div class="subcategory_box" data-id="55">444 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<div class="subcategory_box" data-id="66">555 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<div class="subcategory_box" data-id="73">666 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset
с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
</div>
</div>
</body>
</html>
|
Спасибо.. то что нужно!
|
| Часовой пояс GMT +3, время: 07:29. |