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

@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, код за меня - это было бы вообще идеально, но боюсь, что у меня нет на это особых средств для оплаты ваших трудов((( Буду как-то решать сама, если что-то опять не получится, тогда обращусь за помощью...

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,834
	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