Смена меню по клику на кнопку с помощью хуков

Question

Идея заключалась в том что, при клике на кнопку , скрывалось первое мен., а вместо него на том же месте появлялось второе меню. Но каждый раз при попытке передать с помощью хуков с child на parent получалась каша и выходили ошибки.

Вот собственно сам код. Есть ли возможность реализовать с помощью хуков ?Сам код

Answer 1

Да будет счастья вам ^-^

const links = document.querySelectorAll(".menu-link");
    const submenu =document.querySelector(".submenu").children;

    for(let i = 0; i < links.length; i++){
        links[i].addEventListener("click", showSubMenu)
    }

    function showSubMenu(){
        for(let i = 0; i < submenu.length; i++){
        submenu[i].classList.remove("active");

        if(links[i] == this) submenu[i].classList.add("active");
    }
    }

body{
        width: 100%;
        margin: 0;
        font-family: consolas;
    }

    .menu{
        position: sticky;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0;
        box-shadow: 0 0 15px 2px rgba(0, 0, 0, .4);
        background-color: #fff;
        z-index: 999;
    }

    .menu-link{
        padding: 12px 24px;
        text-decoration: none;
        color: #000;
        letter-spacing: .15em;
        font-size: 1rem;
        font-weight: 600;
    }

    .active{
        transform: translateY(0) !important;
    }

    .submenu{
        position: relative;
    }

    .submenublock{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 10px 1px rgba(0, 0, 0, .4);
        transform: translateY(-400%);
        transition: .25s;
    }

    .submenu a{
        padding: 12px 24px;
        text-decoration: none;
        transition: .25s;
        color: #000;
    }

    .submenu a:hover{
        color: red;
    }

<div class="menu">
    <a href="#" class="menu-link">Первый меню</a>
    <a href="#" class="menu-link">Второй меню</a>
    <a href="#" class="menu-link">Третий меню</a>
    <a href="#" class="menu-link">Четвёртый меню</a>
</div>

<div class="submenu">
    <div class="submenublock submenu1">
        <a href="#">Первый меню</a>
        <a href="#">Первый меню</a>
        <a href="#">Первый меню</a>
        <a href="#">Первый меню</a>
    </div>

    <div class="submenublock submenu2">
        <a href="#">Второй меню</a>
        <a href="#">Второй меню</a>
        <a href="#">Второй меню</a>
        <a href="#">Второй меню</a>
    </div>

    <div class="submenublock submenu3">
        <a href="#">Третий меню</a>
        <a href="#">Третий меню</a>
        <a href="#">Третий меню</a>
        <a href="#">Третий меню</a>
    </div>

    <div class="submenublock submenu4">
        <a href="#">Четвёртый меню</a>
        <a href="#">Четвёртый меню</a>
        <a href="#">Четвёртый меню</a>
        <a href="#">Четвёртый меню</a>
    </div>
</div>

БЛОГ НА HUSL

Смена меню по клику на кнопку с помощью хуков

Ответы (1 шт):