Форум

nikoshot · #1 (**permalink**) 20.02.2023, 21:58

<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 с другим атрибутом..

Это получается как меню.. только оно в разных блоках...
за ранее благодарен..

voraa · #2 (**permalink**) 20.02.2023, 22:41

Вам наверно для всех 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>

рони · #3 (**permalink**) 20.02.2023, 22:49

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>

nikoshot · #4 (**permalink**) 20.02.2023, 23:55

Почти то что нужно.. есть один нюанс. нужно что бы блок с классом "open" не закрывался когда мы на него переходим.. Вот тут набросал верстку и ваш код https://jsfiddle.net/mgohk37w/

Нужно что бы если мы перешли в открытый блок то что бы он не закрывался...
Спасибо!

рони · #5 (**permalink**) 21.02.2023, 00:20

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>

nikoshot · #6 (**permalink**) 21.02.2023, 00:30

Спасибо.. то что нужно!

Форум

Справочник

Discord чат

Курсы javascript