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

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

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

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

Новые блоги и статьи Все статьи Все блоги /
Согласованность транзакций в MongoDB Codd 30.04.2025 MongoDB, начинавшая свой путь как классическая NoSQL система с акцентом на гибкость и масштабируемость, сильно спрогрессировала, включив в свой арсенал поддержку транзакционной согласованности. Это. . .	Продвинутый ввод-вывод в Java: NIO, NIO.2 и асинхронный I/O Javaican 30.04.2025 Когда речь заходит о вводе-выводе в Java, классический пакет java. io долгие годы был единственным вариантом для разработчиков, но его ограничения становились всё очевиднее с ростом требований к. . .	Обнаружение объектов в реальном времени на Python с YOLO и OpenCV AI_Generated 29.04.2025 Компьютерное зрение — одна из самых динамично развивающихся областей искусственного интеллекта. В нашем мире, где визуальная информация стала доминирующим способом коммуникации, способность машин. . .	Эффективные парсеры и токенизаторы строк на C# UnmanagedCoder 29.04.2025 Обработка текстовых данных — частая задача в программировании, с которой сталкивается почти каждый разработчик. Парсеры и токенизаторы составляют основу множества современных приложений: от. . .	C++ в XXI веке - Эволюция языка и взгляд Бьярне Страуструпа bytestream 29.04.2025 C++ существует уже более 45 лет с момента его первоначальной концепции. Как и было задумано, он эволюционировал, отвечая на новые вызовы, но многие разработчики продолжают использовать C++ так, будто. . .
Слабые указатели в Go: управление памятью и предотвращение утечек ресурсов golander 29.04.2025 Управление памятью — один из краеугольных камней разработки высоконагруженных приложений. Го (Go) занимает уникальную нишу в этом вопросе, предоставляя разработчикам автоматическое управление памятью. . .	Разработка кастомных расширений для компилятора C++ NullReferenced 29.04.2025 Создание кастомных расширений для компиляторов C++ — инструмент оптимизации кода, внедрения новых языковых функций и автоматизации задач. Многие разработчики недооценивают гибкость современных. . .	Гайд по обработке исключений в C# stackOverflow 29.04.2025 Разработка надёжного программного обеспечения невозможна без грамотной обработки исключительных ситуаций. Любая программа, независимо от её размера и сложности, может столкнуться с непредвиденными. . .	Создаем RESTful API с Laravel Jason-Webb 28.04.2025 REST (Representational State Transfer) — это архитектурный стиль, который определяет набор принципов для создания веб-сервисов. Этот подход к построению API стал стандартом де-факто в современной. . .	Дженерики в C# - продвинутые техники stackOverflow 28.04.2025 История дженериков началась с простой идеи — создать механизм для разработки типобезопасного кода без потери производительности. До их появления программисты использовали неуклюжие преобразования. . .

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,553
	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

Опции темы