Я новичок в 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;}
Если вы нажмете на элемент <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 - синим, а щелкнутые одноцветные братья - синим.