Подменю не скрывается

@Divil · Регистрация: 11.04.2012

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

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<menu id="v-menu">
   <ul>
    <li><a href="index.php">Главная</a></li>
    <li><a href="">Новости</a></li>
    <li id="vmenus"><a href="#">Статьи</a>
      <ul id="vmenu">
       <li><a href="">Подменю Статьи 1</a></li>
       <li><a href="">Подменю Статьи 2</a></li>
       <li><a href="">Подменю Статьи 3</a></li>
      </ul>
    </li>
    <li><a href="#">Файлы</a>
      <ul id="vmenu">
       <li><a href="">Подменю Файлы 1</a></li>
       <li><a href="">Подменю Файлы 2</a></li>
       <li><a href="">Подменю Файлы 3</a></li>
      </ul>
    </li>
    <li><a href="">Обратная связь</a></li>
    <li><a href="">Гостевая книга</a></li>
    <li><a href="">F.A.Q.</a></li>
   </ul>
  </menu>

JavaScript
1
2
3
4
5
6
7
8
9
function initMenu() {
  $('#vmenu').hide();
  $('#vmenus a').click(
    function() {
        $(this).slideToggle();  
      }
    );
  }
$(document).ready(function() {initMenu();});

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
@charset "utf-8";
/* Вертикальное меню */
 
#v-menu, #v-menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}
 
#v-menu a {
  display: block;
  text-decoration: none;    
}
 
#v-menu li {
  margin-top: 1px;
}
 
#v-menu li a {
  background: #333;
  color: #fff;  
  padding: 0.5em;
}
 
#v-menu li a:hover {
  background: #000;
}
 
#v-menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}
 
#v-menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
 
 
 
/* Горизонтальное меню */

Всем привет! Скажите пожалуста в чем ошибка? подменю почему-то не хочет скрывать(((

Vovan-VE · 05.11.2012, 18:18

Замените id на классы. Нельзя дублировать id.

@Divil · 05.11.2012, 19:51 **[ТС]**

id="v-menu", class="vmenus", class="vmenu" в таком типе заменить или как?

Добавлено через 1 час 31 минуту
так что никто помочь не может?

@Soldado · 05.11.2012, 21:37

Скрывать элементы лучше в CSS, так их сразу не будет видно, не дожидаясь загрузки элемента. Кроме того, что у Вас несколько раз встречается один и тот же id есть ещё ошибки в скрипте.
Принцип построения таких меню следующий: Элемент по которому кликают должен иметь класс или если через родителя обращаются то нужно чтобы родитель имел класс. Далее поиск того элемента который должен быть закрыт/открыт идёт относительно кликнутого элемента. Таким образом откроется именно тот элемент, который необходим.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function initMenu() {
  $('.vmenus').children('a').click( //именно children так как там есть и другие ссылки
    function(e) {
    event.preventDefoult();// предотвращает переход по ссылке, нам не нужен переход, а нужно открытие
        $(this).next('.vmenu').slideToggle();//относительный поиск, чтобы не все .vmenu скрывались, а именно следующие после кликнутой ссылки  
      }
    );
  }
$(document).ready(function() {initMenu();});
 </script>

Смотрим, что получилось на демо-странице.

Новые блоги и статьи Все статьи Все блоги /
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 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	05.11.2012, 18:18
	Замените id на классы. Нельзя дублировать id. 1

@Divil 8 / 8 / 10 Регистрация: 11.04.2012 Сообщений: 611
	05.11.2012, 19:51 [ТС]
	id="v-menu", class="vmenus", class="vmenu" в таком типе заменить или как? Добавлено через 1 час 31 минуту так что никто помочь не может? 0