Вкладка меню-аккордеона закрывается при нажатии

@GEORGE001 · Регистрация: 05.01.2018

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

Задумка такая. При нажатии на кнопку меню - "выпадает" подменю, которое является ссылкой на ВКЛАДКУ. Но при нажатии на это подменю, открывается вкладка, а само меню закрывается. Для того, чтобы его открыть, нужно повторить процедуру, но так как те самые кнопки меню являются ссылками на свои подменю, то вкладка исчезает. ВОПРОС ВОТ В ЧЕМ: как сделать так, чтобы подменю оставались на месте? Ну или хотя бы вкладки не закрывались при нажатии на основные кнопки?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="menu">
  <div class="doc">
    <section id="slider-menu">
      <a href="#slider-menu">Control</a>
      <li><a href="#add">Add</a></li>
      <li><a href="#change">Change</a></li>
      <li><a href="#delete">Delete</a></li>
    </section>
    <section id="settings">
      <a href="#settings">Settings</a>
      <li><a href="#pass">Change password</a></li>
    </section>
    <section id="back">
      <a href="../index.php" target="_blank">Slider</a>
    </section>
  </div>
</div>
<div class="working_area">
  <div id="add" class="panel">Hallo, i`m vkladka))</div>
</div>

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
.menu {
  float: left;
  height: 91%;
  width: 20%;
  position: absolute;
  display: block;
  left: 0;
  border-right: 1px solid #4caf50;
}
 
.doc {
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #7d7d7d;
}
 
section li {
  list-style: none;
  overflow: hidden;
  max-height: 0em;
  margin: 0;
  text-align: justify;
  font-family: Estre;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section li a {
  padding-left: 25px;
  background: #9c9b9b;
}
 
section a {
  letter-spacing: 1px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: left;
  padding: 10px 15px;
  background: #898989;
  border-bottom: 1px solid grey;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section>a:hover {
  background: #5e5d5d;
  padding-left: 45px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section:target li {
  max-height: 3em;
  border-bottom: 1px solid grey;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section:target>a {
  background-color: #4d4d4d;
  padding-left: 25px;
}
 
li:hover>a {
  padding-left: 45px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
 
/*   TABS   */
 
.working_area {
  float: right;
  height: 300px;
  width: 300px;
  position: absolute;
  left: 25%;
}
 
.panel {
  opacity: 0;
  margin-top: -150%;
}
 
.panel:target {
  opacity: 1;
  margin-top: 5%;
}

Для лучшего понимания - вот ссылка

@mrtoxas · 18.06.2018, 12:43

Посредством CSS эту задачу можно решить так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="menu">
  <div class="doc">
    <section id="slider-menu">
      <label for="checkCntrl">Control</label>
      <input type="checkbox" id="checkCntrl" class="menu-checkbox">
      <ul>
        <li><label for="input-panel1">Add</label></li>
        <li><a href="#">Change</a></li>
        <li><a href="#">Delete</a></li>
      </ul>
    </section>
  </div>
</div>
 
<div class="working_area">
  <input type="radio" id="input-panel1" class="menu-checkbox">
  <div id="add" class="panel">Hallo, i`m vkladka))</div>
</div>

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
.menu {
  float: left;
  height: 91%;
  width: 20%;
  position: absolute;
  display: block;
  left: 0;
  border-right: 1px solid #4caf50;
}
 
.doc {
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #7d7d7d;
}
 
section li {
  list-style: none;
  overflow: hidden;
  max-height: 0em;
  margin: 0;
  text-align: justify;
  font-family: Estre;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section li a,
section li label{
  padding-left: 25px;
  background: #9c9b9b;
}
section ul{
  margin:0;
  padding:0;
} 
.menu-checkbox{
  display: none;
}
section a,
section label{
  cursor:pointer;
  letter-spacing: 1px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: left;
  padding: 10px 15px;
  background: #898989;
  border-bottom: 1px solid grey;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
section>a:hover {
  background: #5e5d5d;
  padding-left: 45px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.menu-checkbox:checked + ul >li{
  max-height: 3em;
  border-bottom: 1px solid grey;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;  
} 
 
 
 
li:hover>a {
  padding-left: 45px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
 
 
/*   TABS   */
 
.working_area {
  float: right;
  height: 300px;
  width: 300px;
  position: absolute;
  left: 25%;
}
 
.panel {
  opacity: 0;
  margin-top: -150%;
}
 
.menu-checkbox:checked + .panel {
  opacity: 1;
  margin-top: 5%;
}

Но у данного подхода есть минусы. Один из них - список не скроется, если нажать на другой пункт меню.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .