Решила описать, т.к. хоть действия и простейшие, но у меня с первой попытки без багов реализовать нужную задачку не получилось.
Честно говоря, я не знаю можно ли в вордпрессе прям красиво сделать вывод html, css и js, чтобы наглядно получилось, так что только код.
Например, имеем подобную структуру:
Нужно, чтобы по клику на заголовок, список пользователей сворачивался, стрелочка у заголовка переворачивалась и менялась прозрачность заголовка. Реализовывала с помощью jQuery, получилось в итоге так:
$(document).ready(function(){
//обращаемся к заголовку элемента team_group(мои грабли — обращалась в первом варианте реализации не именно к заголовку, а ко всему блоку, в итоге при клике по всей области team_group, участники группы сворачивались(блондинка, да))
$(«.team_group»).children(«h3»).click(function () {
// меняем прозрачность заголовка, если на него уже был клик и прозрачность = 0,7, то при следующем клике меняем ее на 1. Тут из интересного, если в скобочках у css не передавать значение свойства, то мы получаем существующее значение этого свойства и в итоге можем его с чем-либо сравнить.
$(this).css(«opacity», $(this).css(«opacity») == «0.7» ? «1» : «0.7»);
// аналогично изменению css-свойства меняем src у картинки(в данном случае переворачиваем стрелочку)
$(this).children(«img»).attr(«src»,$(this).children(«img»).attr(«src») == «images/arrow_up.png» ? «images/arrow.png» : «images/arrow_up.png»);
//а это самая интересная и забавная запись, мне кажется) Т.к. первой строкой обращались к заголовку(h3), а не к team_group, то в this у нас этот заголовок и попадает и дальше идет поиск по детям h3, и уж .team_person там нет. Так что с пом-ю parent() поднимаемся на уровень выше и вуаля! Может, это не самый красивый способ, так что буду рада советам;)
$(this).parent().children(«.team_person»).toggle();
});
P.S. Может, мой читатель расскажет, почему css знает, что такое hover, а что такое click нет? 🙂