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

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

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 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 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

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