Связать вертикальное и горизонтальное меню

@_kost_ · Регистрация: 10.01.2014

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

Очередной трабл с меню, хотелось бы узнать можно ли организовать так что бы при клике по горизонтальному меню раскрывалась необходимая часть в вертикальном меню?
Собственно примеры самих меню:
Горизонтальное:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 
<?if (!empty($arResult)):?>
<div class="image-load-left"></div>
<div class="image-load-right"></div>
<div class="image-load-bg"></div>
 
<div class="web-blue-tabs-menu" id="web-blue-tabs-menu">
 
    <ul>
<?foreach($arResult as $arItem):?>
 
    <?if ($arItem["PERMISSION"] > "D"):?>
        <li<?if ($arItem["SELECTED"]):?> class="selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><abc><?=$arItem["TEXT"]?></abc></a></li>
    <?endif?>
 
<?endforeach?>
 
    </ul>
</div>
<div class="menu-clear-left"></div>
<?endif?>

Вертикальное меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='#'><span>Главная</span></a>
        <ul>
            <li class='active'><a href='/index.php/'><span>Новости</span></a></li>
            <li class='active'><a href='/partnery.php/'><span>Социальные партнеры колледжа</span></a></li> 
            <li class='active'><a href='/obyavleniya.php/'><span>Объявления</span></a></li>
        </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Сведения об образовательной организации</span></a>
            <ul>
                <li class='active'><a href='/Svedeniya/osnovnye-svedeniya.php/'><span>Основные Сведения</span></a></li>
                <li class='active'><a href='/Svedeniya/dokumenty.php/'><span>Документы</span></a></li>
         </ul>    
         </li>
    </ul>
</div>

И сам JQuery открытия закрытия вертикального меню:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
    $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });
 
    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});

К примеру на горизонтальном меню нажимаю кнопку "Главная" открывается страница "Главная" а так же в вертикальном меню как страница загрузилась так же была развернута "Главная".

Добавлено через 30 минут
А так же возник еще вопрос: в JS как можно добавить значение display: block;

JavaScript
1
$('#cssmenu ul a[href="'+link+'"]').parent().val('значение');

как то так? в поле значение как это можно написать?

Добавлено через 12 минут
точнее element.style для ul

Добавлено через 2 часа 46 минут
$('????').parent().css("display", "block"); вместо вопрос что написать чтобы именно к выбранному li has-sub применялся блок к ul?

Добавлено через 12 минут

JavaScript
1
$('.open').parent().css("display", "block");

разобрался

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки 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. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .