ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: раскрывающееся меню

Решил задачу «Создать раскрывающееся меню» к подразделу 2.1 «Введение в браузерные события» второй части учебника по JavaScript.

В теле заданной HTML-страницы есть следующий код (см. в песочнице):
▶ ▼ Сладости (нажми меня)!
<ul>
  <li>Пирожное</li>
  <li>Пончик</li>
  <li>Мёд</li>
</ul>

В принципе, сразу понятно, что нужно делать (если читал учебник). При щелчке мышью на главный пункт меню «Сладости (нажми меня)!» какие-то HTML-элементы потребуется скрывать, а другие — делать видимыми. В общем, задача несложная.

Отмечу, что текст HTML-страницы, скриптов и так далее желательно хранить в кодировке UTF-8, чтобы символы «▶» и «▼» отразились правильно. По идее, это должно быть по умолчанию, потому что сейчас в вебе это повсеместная практика. Но на всякий случай я решил вписать в исходный код заданной HTML-страницы вместо этих символов специальные последовательности, которые в браузере будут отражены так же, как и первоначальные символы.

Коды символов «▶» и «▼» в Юникоде я, как обычно, определил с помощью сайта
https://unicode-table.com/ru/

Для определения кода в Юникоде любого символа достаточно скопировать этот символ в строку поиска указанного сайта и запустить поиск. Для каждого символа на сайте есть отдельная страница с информацией по этому символу. Там есть код этого символа в таблице Юникода, код этого символа в языке HTML, в языке CSS и так далее.

Символ «▶» называется «Черный треугольник с вершиной направо», его код в таблице Юникода U+25B6, а в языке HTML — &#9654;. Символ «▼» называется «Черный треугольник с вершиной вниз», его код в таблице Юникода U+25BC, а в языке HTML — &#9660;. Меняем код HTML-страницы:
&#9654; &#9660; Сладости (нажми меня)!
<ul>
  <li>Пирожное</li>
  <li>Пончик</li>
  <li>Мёд</li>
</ul>

Чтобы было удобно работать с главным пунктом нашего меню из скрипта на языке JavaScript, я решил сделать его HTML-элементом, а символы-черные треугольники тоже решил сделать отдельными HTML-элементами в составе главного пункта нашего меню. Всем ключевым HTML-элементам, которые потребуется скрывать и делать видимыми, дадим идентификаторы. Меняем код HTML-страницы:
<span id="main">
  <span id="rightTri">&#9654; </span>
  <span id="downTri">&#9660; </span>
  Сладости (нажми меня)!
</span>
<ul id="items">
  <li>Пирожное</li>
  <li>Пончик</li>
  <li>Мёд</li>
</ul>

Сразу после загрузки в браузере заданной HTML-страницы наше меню, по идее, должно быть свернуто. Отразим это в коде заданной HTML-страницы (я пометил изменения красным цветом):
<span id="main">
  <span id="rightTri">&#9654; </span>
  <span id="downTri" hidden>&#9660; </span>
  Сладости (нажми меня)!
</span>
<ul id="items" hidden>
  <li>Пирожное</li>
  <li>Пончик</li>
  <li>Мёд</li>
</ul>

Теперь можно писать скрипт на языке JavaScript:
main.onclick = openMenu;

function openMenu() {
    rightTri.hidden = !rightTri.hidden;
    downTri.hidden = !downTri.hidden;
    items.hidden = !items.hidden;
}

Вот, собственно, и всё.

При щелчке мышью на главный пункт нашего меню «Сладости (нажми меня)!» значения свойства-флага hidden трех HTML-элементов с идентификаторами rightTri, downTri и items меняются на противоположные. При первом щелчке мышью меню откроется (HTML-элементы downTri и items станут видимыми, а HTML-элемент rightTri будет скрыт), при следующем щелчке мышью меню свернется (HTML-элементы downTri и items будут скрыты, а HTML-элемент rightTri станет видимым) и так далее.

Присутствие ключевого слова hidden (по-русски «скрытый») в теге HTML-элемента означает, что это свойство-флаг равно значению true, а отсутствие этого ключевого слова в теге HTML-элемента означает, что это свойство-флаг равно значению false.

Можно добавить на заданную HTML-страницу стили для имеющихся HTML-элементов, настроив отображение этих HTML-элементов в браузере так, как захочется. Я решил подогнать внешний вид моего меню под внешний вид меню, получившегося у авторов рассматриваемой задачи. Для этого я добавил следующие стили в заголовочную часть заданной HTML-страницы:
<style>
  #main {               /* стиль главного пункта меню */
    cursor: pointer;
    font-size: 18px;
  }

  #rightTri, #downTri { /* стиль треугольников */
    font-size: 80%;
    color: #008000;
  }

  #items {              /* стиль списка младших пунктов меню */
    margin: 0;
    list-style: none;
    padding-left: 20px;
  }
</style>

Теперь наше меню выглядит точно так же, как меню в решении авторов задачи. Его действующую версию можно увидеть на странице рассматриваемой задачи.

Решение от авторов задачи очень интересное, я его разобрал, но написать его с самого начала не смог бы, потому что не владею языком CSS настолько хорошо, а в обсуждаемом учебнике этот язык не изучается. Предполагается, что ученик уже изучил язык CSS где-то еще. Работа с CSS-классами из скрипта на языке JavaScript рассматривалась в подразделе 1.8 «Стили и классы» второй части учебника. В частности, там был упомянут метод elem.classList.toggle, который применили в своем решении авторы задачи.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments