1

При наведении курсора на Local Disk(C:), (D:), (E:) текст должен менять цвет. У меня при наведении меняют цвет в том числе и все дочерние элементы списка, как этого избежать? При наведении на дочерние элементы родитель подсвечиваться не должен. Элементы, которые должны менять цвет помечены классом parent. По заданию CSS использовать нельзя.

Html

 <div>This PC
    <ul class="list" id="list">
        <li class="parent">Local Dick(C:)
            <ul>
                <li>Programm Files</li>
                <li>Users</li>
                <li>Windows</li>
            </ul>
        </li>
        <li class="parent">Local Dick(D:)
            <ul>
                <li>New Folder 1</li>
                <li>New Folder 2</li>
                <li>New Folder 3</li>
            </ul>
        </li>
        <li class="parent">Local Dick(E:)
            <ul>
                <li>Games
                    <ul>
                        <li>GTA</li>
                        <li>Assasin's creed</li>
                        <li>Skyrim</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>    
</div>

JavaScript

for (let li of list.querySelectorAll("li")) {
    let span = document.createElement("span");
    span.classList.add("show");
    li.prepend(span);
    span.append(span.nextSibling);
}

list.onclick = function (event) {
    if (event.target.tagName != "SPAN") return;

    let childrenList = event.target.parentNode.querySelector("ul");

    if (!childrenList) return;
    childrenList.hidden = !childrenList.hidden;

    if (childrenList.hidden) {
        event.target.classList.add("hide");
        event.target.classList.remove("show");
    } else {
        event.target.classList.add("show");
        event.target.classList.remove("hide");
    }
    
};

const parentLi = list.getElementsByClassName('parent');

for(var i = 0; i < parentLi.length; i++) {
    light(parentLi[i])
}

function light(parentLi) {
    parentLi.addEventListener("mouseover", function() {
        this.style.color = "pink";
    })
    parentLi.addEventListener("mouseout", function() {
        this.style.color = "black";
    })
}

1 ответ 1

1

li включает в себя список дочерних элементов. Нужно менять цвет не всего li, а только текста заголовка (первый дочерний элемент). В общем, как-то так:

for (let li of list.querySelectorAll("li")) {
    let span = document.createElement("span");
    span.classList.add("show");
    li.prepend(span);
    span.append(span.nextSibling);
}

list.onclick = function (event) {
    if (event.target.tagName != "SPAN") return;

    let childrenList = event.target.parentNode.querySelector("ul");

    if (!childrenList) return;
    childrenList.hidden = !childrenList.hidden;

    if (childrenList.hidden) {
        event.target.classList.add("hide");
        event.target.classList.remove("show");
    } else {
        event.target.classList.add("show");
        event.target.classList.remove("hide");
    }
    
};

const parentLi = list.getElementsByClassName('parent');

for(var i = 0; i < parentLi.length; i++) {
    light(parentLi[i].firstChild); /// собака порылась здесь :)

}

function light(parentLi) {
    parentLi.addEventListener("mouseover", function() {
        this.style.color = "pink";
    })
    parentLi.addEventListener("mouseout", function() {
        this.style.color = "black";
    })
}
1
  • точно, спасибо! До банальщины не додумалась
    – Юлия
    28 ноя 2021 в 9:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.