Присвоить класс элементу в меню исходя из класса активного меню?

Question

[MFNIK]

Добрый день!
Возникла задачка, вот придумал как решить, но не умею.
Сайт на modx, меню аккордеон (bootstrap collapse), необходимо что бы активный пункт меню был открытым.
Придумал решение типа:
Если есть класс "myclass" (это класс активного пункта), то прибавить класс "IN" к определенному диву с классом на сайте, в моем случае закрытый пункт имеет класс "collapse", а открытый "collapse in"
Такое реально? Есть вообще решения такого рода у JS?

Comments

[Ankhena]

jquery toggleClass например, или addClass в зависимости от желаемого поведения

[MFNIK]

Понятно а не могли бы помочь в грамотности. Правильный ли код?

if $('.classnames').hasClass ('.myClass');
else $('див с классом к которому нужно прибавить').toggleClass ('.in');

Так?

[Ankhena]

MFNIK: нет, нужно родительские или дочерние отношения построить между активным пунктом меню и нужным дивом.
Без кода не подсказать какие.

[Ankhena]

MFNIK: типа того

$('.myclass').children('.div-with-child-menu').addClass('in')

Правильнее всего переключать классы для открытого и закрытого состояния, чтобы не беспокоится о том, какой был display

[MFNIK]

Простите вчера отрубили с интернетом. Вот код

КАТЕГОРИЯ


Пункт меню
Пункт меню-2
Пункт меню-3

Так вот я не могу придумать скрипт который при наличии у дочерних ресурсов родителя AddMyActiveClass , будет присваивать родителю активного класса класс IN, что бы было collapse in.

[MFNIK]

<a id="tplParentRow1" href="#18" class="sun-parent collapsed" data-toggle="collapse" data-parent="#MainMenu" aria-expanded="false">
КАТЕГОРИЯ<span class="caret"></span>
</a>
<div class="collapse" id="18" >
<a href="url" class="sun-parent AddMyActiveClass">Ремонт гидроцилиндров</a>
<a href="url" class="sun-parent">Ремонт гидроцилиндров</a>
<a href="url" class="sun-parent">Ремонт гидроцилиндров</a>
</div>

Простите забыл обернуть в тег код.

Answer 1

[Максим Тимофеев]

Тут 2 варианта решения, все сводятся к добавлению класса. Добавить можно на сервере при генерации html меню или же в js.
В js проблема в том, что надо брать текущий url и сравнивать с href ссылки, а они не всегда совпадают. Например могут добавляться хеш теги или параметры, а это уже другая строка. Соответственно скрипт должен это предусматривать.
Чаще это удобнее сделать именно на сервере, но в случае с MODX это не всегда так.
Скриптов js куча:
https://yandex.ua/search/?rdrnd=701635&win=200&tex...
выбирайте, наверняка не все адекватные

Comments

[MFNIK]

Спасибо за подсказку!

[MFNIK]

Тут простым способом не решить, может и решить но я пока не представляю как. Я то хочу плясать от активного пункта, я ему присвою свой класс через &hereClass и если этот класс появляется то тогда нужно присвоить его родителю к классу collapse класс in. И думаю что при загрузке он автоматом будет открыт.

[Максим Тимофеев]

MFNIK: Всмысле? У Вас уже есть для активного пункта класс, но вы не знаете как ему добавить еще класс?

[Роман]

Максим Тимофеев: я вот тоже немного не понял, что ТС хочет. Есть же родное свойство &hereClass=`active`

[MFNIK]

Это древовидное меню, класс нужно менять не активному а родителю, что бы активный был открыт. Когда аккордеон сложен он имеет класс collapse, когда разложен то collapse in. У меня получается только при загрузке все открыть, а как сделать что бы конкретно поменять класс родителю активного меню. Вот не знаю как.

[Максим Тимофеев]

MFNIK: так а в чем проблема это пара строк в js. При загрузке находим активный элемент, потом находим его предка, добавляем ему класс.

[Роман]

MFNIK: https://docs.modx.com/extras/revo/wayfinder - посмотри CSS Class Name Parameters, для всего можно вывести класс. В самом низу, Accordion menu with Wayfinder + Accordion menu with Wayfinder using JQuery = я так понимаю место заготовили для будущий статей?

[MFNIK]

Спасибо за подсказку. Нет ни каких статей не будет, чисто личная работа, даже не за деньги. Столкнулся с проблемой пытаюсь решить. Потихонечку осваиваю MODX.