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

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

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый 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? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@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