Сокрытие выпадающего меню по клику

@angryrobot · Регистрация: 08.10.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте,

Есть простое выпадающее по наведению курсора меню: https://jsfiddle.net/angryrobot/s4cm7qvm/
Пытаюсь сделать так, чтоб после клика на пункт - выпавшее меню пряталось. Реализовать это для десктопных браузеров у меня как-то получалось, но вот с мобильными беда.

Подскажите пожалуйста как решить данную задачу.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="menu">
    <li><a href=#>Menu 1</a>
        <ul class="submenu">
            <li><a href=#>Submenu 1</a></li>
            <li><a href=#>Submenu 1</a></li>
            <li><a href=#>Submenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul class="submenu">
            <li><a href=#>Submenu 2</a></li>
            <li><a href=#>Submenu 2</a></li>
            <li><a href=#>Submenu 2</a></li>
        </ul>
    </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
 
ul.menu > li:hover > ul.submenu {
    display: block;
}

@Grey · 03.01.2018, 19:54

копай в сторону touchstart, touchmove, touchend
вот к примеру https://tech.anisotropic.ru/co... -v-jquery/

Новые блоги и статьи Все статьи Все блоги /
Blazor и контроллер сервопривода IoT Meadow Maple Wired 11.07.2025 Я решил разобраться, как можно соединить современные веб-технологии с миром "железа". Интересная комбинация получилась из Blazor в качестве веб-интерфейса и микроконтроллера Meadow с его веб-сервером. . .	Генерация OpenQASM из кода Q# EggHead 10.07.2025 Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .	Изучаем новый шаблон ИИ-чата .NET AI Chat Web App stackOverflow 10.07.2025 В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .	Результаты исследования от команды ARP (июль 2025 г.) Programma_Boinc 10.07.2025 Результаты исследования от команды ARP (июль 2025 г. ) Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .	Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .
Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .	Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .	Раскрываем внутренние механики Android с помощью контекста и манифеста mobDevWorks 07.07.2025 Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .

@Grey Тутошний я 2147 / 1202 / 225 Регистрация: 03.11.2009 Сообщений: 4,424 Записей в блоге: 2
	03.01.2018, 19:54
	копай в сторону touchstart, touchmove, touchend вот к примеру https://tech.anisotropic.ru/co... -v-jquery/ 0

Опции темы