0

При наведении курсора на елемент родителя нужно чтобы выводился подсписок последующих елементов. Например,при наведении на Element 2 высветляется Element 2.1, Element 2.2, Element 2.3, Element 2.4.

<div>
    <ul>
        <li>Element 1</li>
        <li>Element 2
            <ul>
                <li>Element 2.1</li>
                <li>Element 2.2</li>
                <li>Element 2.3</li>
                <li>Element 2.4</li>
            </ul>
        </li>
        <li>Element 3</li>
        <li>Element 4
            <ul>
                <li>Element 4.1</li>
                <li>Element 4.2</li>
                <li>Element 4.3</li>
                <li>Element 4.4</li>
            </ul>
        </li>
    </ul>
</div>

1 ответ 1

3

No js:

ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}
<div>
  <ul>
    <li>Element 1</li>
    <li>Element 2
      <ul>
        <li>Element 2.1</li>
        <li>Element 2.2</li>
        <li>Element 2.3</li>
        <li>Element 2.4</li>
      </ul>
    </li>
    <li>Element 3</li>
    <li>Element 4
      <ul>
        <li>Element 4.1</li>
        <li>Element 4.2</li>
        <li>Element 4.3</li>
        <li>Element 4.4</li>
      </ul>
    </li>
  </ul>
</div>

Yes js:

document.querySelectorAll("div > ul > li").forEach(i => {
  i.addEventListener("mouseenter", function(e) {
    var ul = this.querySelector("ul");
    if (ul)
      ul.classList.add("show");
  });
  i.addEventListener("mouseleave", function(e) {
    var ul = this.querySelector("ul");
    if (ul)
      ul.classList.remove("show");
  });
});
ul li ul {
  display: none;
}

.show {
  display: block;
}
<div>
  <ul>
    <li>Element 1</li>
    <li>Element 2
      <ul>
        <li>Element 2.1</li>
        <li>Element 2.2</li>
        <li>Element 2.3</li>
        <li>Element 2.4</li>
      </ul>
    </li>
    <li>Element 3</li>
    <li>Element 4
      <ul>
        <li>Element 4.1</li>
        <li>Element 4.2</li>
        <li>Element 4.3</li>
        <li>Element 4.4</li>
      </ul>
    </li>
  </ul>
</div>

1
  • Да, но нужно в js чтобы потом прописать условия...
    – Taras
    Commented 20 нояб. 2018 в 22:58

Ваш ответ

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

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