19
Апр
2021

parentElement.classList.toogle не работает js [закрыт]

Делаю меню на сайте, многоуровневое с выпадающим списком, нужно чтобы на больших тач экранах (вроде планшетов) раскрытие списка происходило по нажатию на стрелку справа от элемента тк сам элемент является ссылкой на дргую страницу, но раскрытия не происходит. Использую вот такой код, присваивание классов _touch и _pc происходит корректно. Еще только обучаюсь скрипту но так и не могу понять что я сделал не так, и почему не срабатывает событие

HTML

                <nav class="menu__body">
                    <ul class="menu__list">
                        <li>>
                            <a href="" class="menu__link">Раздел 1</a>
                        </li>
                        <li>
                            <a href="" class="menu__link">Раздел 2</a>
                        </li>
                        <li>
                            <a href="" class="menu__link">Раздел 3</a>
                        </li>
                        <li>
                            <a href="" class="menu__link">Раздел 4</a>
                        </li>
                        <li class="menu__item">
                            <a href="" class="menu__link">Раздел С Подменю</a>
                            <span class="menu__arrow"><i class="fas fa-angle-down"></i></span>
                            <ul class="menu__sub-list">
                                <li>
                                    <a href="" class="menu__sub-link">Подменю 1</a>
                                </li>
                                <li>
                                    <a href="" class="menu__sub-link">Подменю 2 с подменю</a>
                                    <ul class="menu__sub-sub-list">
                                        <li>
                                            <a href="" class="menu__sub-sub-link">ПодПодменю 1</a>
                                        </li>
                                        <li>
                                            <a href="" class="menu__sub-sub-link">ПодПодменю 1</a>
                                        </li>
                                        <li>
                                            <a href="" class="menu__sub-sub-link">ПодПодменю 1</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="" class="menu__sub-link">Подменю 3</a>
                                </li>
                                <li>
                                    <a href="" class="menu__sub-link">Подменю4 </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="" class="menu__link">Раздел 6</a>
                        </li>
                        <li>
                            <a href="" class="menu__link">Раздел 7</a>
                        </li>
                    </ul>
                </nav>

CSS

.menu {

}

.menu__icon {

}

.menu__body {

}

.menu__list {

}

.menu__list li{
    position: relative;
}

.menu__list > li {
    position: relative;
    margin: 0px 0px 0px 20px;
}

.menu__link {
    color: #fff;
    font-size: 18px;
}

.menu__link:hover {
    text-decoration: underline;
}

.menu__sub-list {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #000;
    padding: 15px;
    min-width: 200px;
}

.menu__sub-list li {
    margin: 0px 0px 10px 0px;
}

.menu__sub-list li:last-child {
    margin: 0px;
}

.menu__sub-link {
    color: #fff;
}

.menu__sub-link:hover {
    text-decoration: underline;
}

.menu__sub-sub-list {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #000;
    padding: 15px;
    min-width: 200px;
}

.menu__sub-sub-link {

}

.menu__arrow {
    display: none;
}




/*---------------------------------------------*/


body._pc .menu__list > li:hover .menu__sub-list {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0px);
    pointer-events: all;
}

body._pc .menu__sub-list > li:hover .menu__sub-sub-list {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0px);
    pointer-events: all;
}


/*---------------------------------------------*/


/*---------------------------------------------*/
body._touch .menu__list > li {
    display: flex;
    align-items: center;
}

body._touch .menu__link {
    flex: 1 1 auto;
}

body._touch .menu__arrow {
    width: 1rem;
    height: 100%;
    display: flex;
    vertical-align: middle;
    transition: transform 0.3s ease 0s;
}

.menu__arrow i {
    padding-left: 0.15rem;
    padding-top: 0.185rem;
}


/*---------------------------------------------*/

@media (min-width: 767px) {          
    .menu__list {
        display: flex;
        align-items: center;
    }
    .menu__list > li {
        padding: 10px 0;
    }
    .menu__sub-list {
        transform: translate(0px, 10%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease 0s;
        }    
        .menu__sub-sub-list {    
            transform: translate(0px, 10%);    
            opacity: 0;    
            visibility: hidden;    
            pointer-events: none;    
            transition: all 0.3s ease 0s;    
        }    
    }    

JS

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {

document.body.classList.add('_touch')

let menuArrows = document.querySelectorAll('.menu__arrow');
if (menuArrows.length > 0) {
    for (let index = 0; index < menuArrows.length; index++) {
        const menuArrow = menuArrows[index];
        menuArrow.addEventListener("click", function () {
            menuArrow.parentElement.classList.toogle('_active');
        });
    }
}

} else document.body.classList.add('_pc')    

выдает ошибку:

script.js:12 Uncaught TypeError: menuArrow.parentElement is not a function at HTMLSpanElement. (script.js:12)

Скрин с консоли хрома

Источник: https://ru.stackoverflow.com/questions/1272250/parentelement-classlist-toogle-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-js

Тебе может это понравится...

Добавить комментарий