Универсальное меню JQuery

@vitaly63 · Регистрация: 26.02.2012

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

Добрый день. Не давно, написал JQuery меню, задумывалось что оно будет универсальным и как мне казалось я все сделал правильно. Но как показал тест сразу 2-х и более подобных меню на странице тупо не работают, ну как сказать не работают, открывается первое меню которое успело загрузится после захода на страницу, другое просто не открывается и открывает первое меню. Сама загвоздка в том что я PHP программист и в javascript знаю очень мало. Помогите решить проблему с несколькими открытыми менюшками.
Java:

JavaScript
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
$(function ()
{
    $('div#MenuLink').click(function (a)
    {
        var id = $('div#MenuLink').attr('click');
        var block = $('div#MenuBlock[name="' + id + '"]');
        var activate = $('div#Menu[name="' + id + '"]');
 
        if (block.css('display') != 'block')
        {
            block.slideToggle('slow');
            activate.addClass('active'); //добавляем класс окну при открытии
 
            var menuClick = true;
            $(document).bind("click",function (a)
            {
                if (!menuClick && $(a.target).closest('div#MenuBlock[name="' + id + '"]').length == 0)
                {
                    block.slideToggle('slow');
                    activate.removeClass('active'); //убираем класс окну при закрытии
                    $(document).unbind("click");
                }
                menuClick = false;
            });
        }
    });
});

Html 1-го элемента:

HTML5
1
2
3
4
5
6
7
8
<div id="MenuLink" click="_one">
    <div id="Menu" name="_one">
        <span>Открой меня</span>                      
        <div id="MenuBlock" name="_one" style="display: none;"">
            <b>Открылась первая менюшечка ;)</b>
        </div>
    </div>
</div>

Html 2-го элемента:

HTML5
1
2
3
4
5
6
7
8
<div id="MenuLink" click="_two">
    <div id="Menu" name="_two">
        <span>Открой меня</span>                      
        <div id="MenuBlock" name="_two" style="display: none;">
            <b>Открылась вторая менюшечка ;)</b>
        </div>
    </div>
</div>

Спасибо за внимание)

@Soldado · 17.10.2012, 20:30

В который уже раз: id - индивидуальный идентификатор, не может быть один и тот же идентификатор и нескольких разных блоков.
Ваш код никуда не годится.
Можно строить меню по такому принципу: идёт блок ссылка, за ним скрытый блок, затем снова ссылка и снова скрытый и так сколько угодно раз. У всех ссылок один класс, у всех скрытых блоков - другой класс. И на всё это простой скрипт, в котором при клике по любой ссылке закрываются все скрытые блоки и открывается следующий блок. Таким образом привязывается ссылка к своему конкретному блоку.
Здесь пример такого меню.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача №1: при указании работ (справочник РаботыПоРемонтуСпецтехники),. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	17.10.2012, 20:30
	В который уже раз: id - индивидуальный идентификатор, не может быть один и тот же идентификатор и нескольких разных блоков. Ваш код никуда не годится. Можно строить меню по такому принципу: идёт блок ссылка, за ним скрытый блок, затем снова ссылка и снова скрытый и так сколько угодно раз. У всех ссылок один класс, у всех скрытых блоков - другой класс. И на всё это простой скрипт, в котором при клике по любой ссылке закрываются все скрытые блоки и открывается следующий блок. Таким образом привязывается ссылка к своему конкретному блоку. Здесь пример такого меню. 0