Решила описать, т.к. хоть действия и простейшие, но у меня с первой попытки без багов реализовать нужную задачку не получилось.
Честно говоря, я не знаю можно ли в вордпрессе прям красиво сделать вывод 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 нет? 🙂