Последние записи

made in programmersforum 7

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

20th
Сен

Пример многоуровневого меню

Posted by Chas under JavaScript, Заметки, Пост-обзор

Подскажите пожалуйста как создать список в HTML что бы при нажатии допустим на «Жанр» список раскрывался и появлялись дополнительные пункты как «Научная фантастика», «Юмористическая фантастика», «Фентези» и т.д.

ZvEr_HaCkEr

<!DOCTYPE html>

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>

h3 { cursor:pointer;}

</style>

</head>

<body>

<div class="box">

    <h3><span>Список №1+</span></h3>

    <ul>

        <li>Пункт №1</li>

        <li>Пункт №2</li>

        <li>Пункт №3</li>

        <li>Пункт №4</li>

    </ul>

</div>

<div class="box">

    <h3><span>Список №2+</span></h3>

    <ul>

        <li>Пункт №5</li>

        <li>Пункт №6</li>

        <li>Пункт №7</li>

        <li>Пункт №8</li>

    </ul>

</div>

<script>

$(document).ready(function(){

$("ul").hide();

$("h3 span").click(function(){

$(this).parent().next().slideToggle();

});

});

</script>

</body>

</html>