javaScript смена родительского элемента меню, когда дочерний элемент активен

0

Я новичок в javaScript, и было бы очень полезно для меня, если бы кто-то мог быть так рад дать мне некоторые указания, как это выполнить. Я создаю сайт в Joomla 3, и мне нужно стилизовать меню таким образом, чтобы при активном элементе дочернего меню родительский элемент должен менять цвет фона. Я включил ссылку.js в голову файла index.php моего шаблона. Но я боюсь второй день с желаемым сценарием.

Вот мой HTML:

<ul class="gf-menu l1">
    <li class="item128 parent">
        <a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
        <div class="dropdown columns-1">
            <div class="column col1">
                <ul class="l2">
                    <li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
                    <li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
                    <li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

И что это мой CSS для него:

.gf-menu .dropdown{
    border: 1px solid transparent; 
    border-radius:0; 
    background-color:#a9a9a9; 
    padding:10% 0; 
    width:100%;
    text-shadow:none;
    font-size:85%;
}
.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}
Теги:

1 ответ

0
Лучший ответ

Если вы нажмете на элемент <li> и хотите повлиять на родителя, вы можете использовать метод .parent() для .parent() родительского элемента. Вопрос в том, какой из них вы хотите настроить. Если это div содержащий <ul> вам нужно будет получить доступ к родительскому элементу родителя. Например, если <li> имеет класс item, как вы указывали в вашем вопросе, вы можете сделать

$('.item').on('click', function(){
    var clickedLiElement = $(this);
    var parentHoldingUl = clickedLiElement.parent().parent();

    //now you can do whatever you want with both of them, for example
    clickedLiElement.addClass('active');
    parentHoldingUl.css('background-color', 'green');
});

Обновление по комментариям:

Немного более короткая версия, которая делает то, что вы указали в комментариях

$('.item').on('click', function(){
    $(this).css('background-color', '#5512F3');
    $(this).parent().parent().css('background-color', '#5512F3');
    $(this).siblings().css('background-color', '#AB99D5');
});

Это должно привести к щелканному элементу LI, а родительский DIV - синим, а щелкнутые одноцветные братья - синим.

  • 0
    Спасибо за быстрый ответ! Я пытаюсь сделать что-то вроде этого: «Наши услуги» (item128 parent) -> «Item1» (если он активен - идет темно-синий itslef + родительский элемент; остальная часть выпадающего меню становится светло-голубой) -> «Item2» -> «Item3»
  • 0
    Просто чтобы убедиться, что я правильно понимаю - активный элемент LI становится темно-синим, а оболочка DIV и другие LI изменяются на светло-синий .. верно? Если я правильно понял, я могу обновить ответ.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню