Помогите как написать небольшой скрипт..
<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, время: 22:06. |