Написание скрипта или готовый аккордеон меню с определенными условиями

@Marrusa1001 · Регистрация: 22.12.2016

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

Есть задачка - создать меню-аккордеон и параллельно обычные кнопки с подсветкой активного пункта меню!
В левой части сайта 2 вида меню перемежаются между собой (см. HTML):
1. один тип меню содержит подпункты (.accordion);
2. второй тип меню подпунктов не содержит (.non-ac).

Там, где есть подпункты:
- при клике на родителя добавлять класс .act01 и одновременно раскрывать подпункты (переходов по ссылке родителя не будет, она только открывает подменю);
- при клике на подпункте добавлять класс .act02 и одновременно переходить по ссылке на нужную страницу;
- когда совершен переход по ссылке подпункта оставлять ракрытым меню и активным родителя и подпункт.

Там, где нет подпунктов:
- при клике на пункте добавлять класс .act03 и одновременно переходить по ссылке на нужную страницу
- когда совершен переход по ссылке оставлять пункт активным.

Сайт на php, меню будет подключаться через include ко всем страницам.

Еще! Возможно будут рассылаться прямые ссылки пользователям. Важно!!! чтобы функционал менюшек сохранялся даже при переходе по прямой ссылке.

Бьюсь вторую неделю, т.к. не очень сильна в javascript и том, что с ним связано. Использовала несколько скриптов (см. js ниже), но нужного эффекта так и не добилась

Подключала следующие библиотеки

HTML5
1
2
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="/src/jquery.cookie.js" type="text/javascript"></script>

Помогите, пожалуйста! Либо готовыми скриптами либо советом, где искать, очень важен именно такой функционал, как я описала. Сайт пока только на локальном серваке верстается.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Left Content */
#left-cont { float:left; width:360px; margin-right:20px; padding:10px; }
/* Left Nonaccordion Menu */
    ul.non-ac { padding-left:0; margin-bottom:30px; text-align:center; }
    ul.non-ac:last-of-type { margin-bottom:0; }
    ul.non-ac li a { display:block; position:relative; padding:10px; margin:3px auto; color:#5f5d6a; border:1px solid #5f5d6a; }
    ul.non-ac li a:hover, ul.non-ac li a.act03 { font-weight:bold; }
/*End Nonaccordion Menu */
/* Left Accordion Menu */
    ul.accordion { padding-left:0; margin-bottom:30px; text-align:center; overflow:hidden; }
    ul.accordion:last-of-type { margin-bottom:0; }
    ul.accordion li a { display:block; position:relative; padding:10px; margin:3px auto; color:#5f5d6a; border:1px solid #5f5d6a; }
    ul.accordion li a:hover, ul.accordion li a.act01 { font-weight:bold; }
/*Sub Accordion Menu */
    ul.accordion li ul { display:none; }
    ul.accordion li ul a { display:block; margin:2px 0 2px 20px; }
    ul.accordion li ul a:hover, ul.accordion li ul a.act02 { font-weight:normal; background-color:#feedc6; color:#5f5d6a; }
/* End Left Menu */
/* End Left Content */

HTML5
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
    <div id="left-cont">
        <ul class="non-ac">
            <li><a href="/anniversary/">К&nbsp;90-летию</a></li>
        </ul>
        <ul class="accordion">
        <li class="sub"><a href="">Информация о&nbsp;Конгрессе</a>
            <ul>
            <li><a href="/congr-info/org-com/">Организационный комитет</a></li>
            <li><a href="/congr-info/bureau/">Президиум Конгресса</a></li>
            <li><a href="/congr-info/scie-com/">Научный комитет</a></li>
            <li><a href="/congr-info/struct-prog/">Структура и&nbsp;научная программа</a></li>
            <li><a href="/congr-info/schedule/">Расписание Конгресса</a></li>
            <li><a href="/congr-info/location/">Место проведения</a></li>
            </ul>
        </li>
        <li class="sub"><a href="">Спонсорам и&nbsp;Экспонентам</a>
            <ul>
            <li><a href="/spons-exh/for-sponsors/">Информация для&nbsp;спонсоров</a></li>
            <li><a href="/spons-exh/for-exhibitors/">Информация для&nbsp;экспонентов</a></li>
            </ul>
        </li>
        <li class="sub"><a href="">Участнику</a>
            <ul>
            <li><a href="/partic/terms-orgfees/">Условия участия<br/>и&nbsp;Организационные взносы</a></li>
            <li><a href="/partic/reg-instr/">Инструкция по&nbsp;регистрации</a></li>
            <li><a href="/partic/abstr-require/">Требования к&nbsp;оформлению материалов для&nbsp;публикации</a></li>
            <li><a href="/partic/abstr-instr/">Инструкция по&nbsp;подаче материалов для&nbsp;публикации</a></li>
            </ul>
        </li>
        </ul>
        <ul class="non-ac">
        <li><a href="/vi-ohph-congr/">VI&nbsp;Всероссийский съезд<br/>врачей-профпатологов</a></li>
        <li><a href="/who-guest-ses/">Выездная сессия<br/>Всемирной Организации Здравоохранения</a></li>
        <li><a href="/iarc-scie-conf/">Научная конференция<br/>Международного Агентства<br/>по&nbsp;изучению рака</a></li>
        <li><a href="/balt-reg-safe-meet/">Совещание по&nbsp;программе профессиональной безопасности и&nbsp;здоровью стран Балтийского Региона</a></li>
        <li><a href="/cme-ed-sem/">Образовательный семинар по&nbsp;программе системы обучения НМО</a></li>
        <li><a href="/und-constr/">&hellip;</a></li>
        </ul>
        <ul class="accordion">
        <li class="sub"><a href="">Услуги</a>
            <ul>
                <li><a href="/service/hot-accom/">Гостиничное размещение</a></li>
                <li><a href="/service/cult-prog/">Культурная программа</a></li>
                <li><a href="/service/transfers/">Трансферы</a></li>
                <li><a href="/service/gala-din/">Торжественный ужин</a></li>
            </ul>
        </li>
        <li class="sub"><a href="">Полезная информация</a>
            <ul>
            <li><a href="/help-info/deadlines/">Важные даты и&nbsp;дедлайны</a></li>
            <li><a href="/help-info/faq/">Часто задаваемые вопросы</a></li>
            <li><a href="/help-info/route/">Как&nbsp;добраться до&nbsp;места проведения</a></li>
            <li><a href="/help-info/ab-spb/">Немного о&nbsp;Санкт-Петербурге</a></li>
            </ul>
        </li>
        </ul>
        <ul class="non-ac">
        <li><a href="/contacts/">Контактная информация</a></li>
        <li><a href="/news/">Последние новости и&nbsp;изменения</a></li>
        </ul>
        <ul class="accordion">
        <li class="sub"><a href="">Архив</a>
            <ul>
            <li><a href="/archive/2015/">XIII&nbsp;Конгресс (2015&nbsp;год)</a></li>
            <li><a href="/archive/2013/">XII&nbsp;Конгресс (2013&nbsp;год)</a></li>
            <li><a href="/archive/2012/">I&ndash;XI&nbsp;Конгрессы (2002&ndash;2012&nbsp;годы)</a></li>
            </ul>
        </li>
        </ul>
    </div>

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
28
29
30
31
<script type="text/javascript">
    $(document).ready(function () {
    var checkCookie = $.cookie("sub-nav");
    if (checkCookie != "") {
    $('ul.accordion > li.sub > a:eq('+checkCookie+')').addClass('act01').next().show();
    }
    $('ul.accordion > li.sub > a').click(function(){
    var navIndex = $('ul.accordion > li.sub > a').index(this);
    $.cookie("sub-nav", navIndex);
    $('ul.accordion li ul').slideUp();
    if ($(this).next().is(":visible")){
    $(this).next().slideUp();
    } else {
    $(this).next().slideToggle();
    }
    $('ul.accordion li a').removeClass('act01');
    $(this).addClass('act01');
    return false;
    });
    var checkCookie = $.cookie("sub-link");
    if (checkCookie != "") {
    $('ul.accordion > li.sub > ul li a:eq('+checkCookie+')').addClass('act02');
    }
    $('.sub ul li a').click(function(){
    var subIndex = $('.sub ul li a').index(this);
    $.cookie("sub-link", subIndex);
    $('.sub ul li a').removeClass('act02');
    $(this).addClass('act02');
    });
    });
</script>

JavaScript
1
2
3
4
5
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.non-ac a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('act03');
    });
    </script>

@sad67man · 23.12.2016, 15:23

Marrusa1001, Выделение активного меню при загрузке страницы я бы делал на стороне сервера при помощи php. А на Js только раскрытие/скрытие подменю при клике. Куки тут точно не нужны.

@Marrusa1001 · 23.12.2016, 15:32 **[ТС]**

sad67man, спасибо, я попробую сделать так тогда, если конечно никто, кроме вас, ничего с javascript не сможет посоветовать

@Marrusa1001 · 09.01.2017, 10:17 **[ТС]**

Еще раз обращаюсь к спецам за помощью. Кто-нибудь может подсказать еще какие-либо решения по моему вопросу? Хотя бы в какую сторону копать и где искать ответа. Буду очень-очень-очень благодарна...

@Balanaar · 09.01.2017, 10:31

Marrusa1001, господин sad67man вам всё правильно сказал. Добавить нечего. Только если код написать за вас.

@Marrusa1001 · 09.01.2017, 10:52 **[ТС]**

Balanaar, код за меня - это было бы вообще идеально, но боюсь, что у меня нет на это особых средств для оплаты ваших трудов((( Буду как-то решать сама, если что-то опять не получится, тогда обращусь за помощью...

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	23.12.2016, 15:23
	Marrusa1001, Выделение активного меню при загрузке страницы я бы делал на стороне сервера при помощи php. А на Js только раскрытие/скрытие подменю при клике. Куки тут точно не нужны. 0

@Marrusa1001 0 / 0 / 0 Регистрация: 22.12.2016 Сообщений: 8
	23.12.2016, 15:32 [ТС]
	sad67man, спасибо, я попробую сделать так тогда, если конечно никто, кроме вас, ничего с javascript не сможет посоветовать 0

@Marrusa1001 0 / 0 / 0 Регистрация: 22.12.2016 Сообщений: 8
	09.01.2017, 10:17 [ТС]
	Еще раз обращаюсь к спецам за помощью. Кто-нибудь может подсказать еще какие-либо решения по моему вопросу? Хотя бы в какую сторону копать и где искать ответа. Буду очень-очень-очень благодарна... 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	09.01.2017, 10:31
	Marrusa1001, господин sad67man вам всё правильно сказал. Добавить нечего. Только если код написать за вас. 0

@Marrusa1001 0 / 0 / 0 Регистрация: 22.12.2016 Сообщений: 8
	09.01.2017, 10:52 [ТС]
	Balanaar, код за меня - это было бы вообще идеально, но боюсь, что у меня нет на это особых средств для оплаты ваших трудов((( Буду как-то решать сама, если что-то опять не получится, тогда обращусь за помощью... 0