да суть такая (подсмотрена в WordPress) : у нас есть элементы у которых прописаны атрибуты data-click='click' или data-dblclick='dblclick'или data-hover='hover' , если произошло событие click, dblclick, hover то доставляется класс BODY за писаный в атрибуте соответствующему событию. мы пишем :
<div data-click='click'>data-click='click'</div>
<div data-dblclick='dblclick'>data-dblclick='dblclick'</div>
<div data-hover='hover'>data-hover='hover'</div>
<div class="class1">click</div>
<div class="class2">dblclick</div>
<div class="class3">hover</div>
.click .class1{
margin-top: 0px;
opacity: 1;
}
.dblclick .class2{
top: 100px;
}
.hover .class3{
height: 100px;
width: 100px;
background: fuchsia;
border-radius: 50%;
}
в атрибуты мы можем записывать любые классы
можно управлять группой элементов так:
.click .class1, .class2, .class3, .class4, .class5{
margin-top: 0px;
opacity: 1;
}
или только некоторыми делать все что позволяет css
вот три спойлера -- три ссылки каждая открывает свой div - можно? (но тут нужно будет отменить переход по ссылке)
<a data-click='spoiler1' href='#'>spoiler1</a>
<a data-click='spoiler2' href='#'>spoiler2</a>
<a data-click='spoiler3' href='#'>spoiler3</a>
<div class="class1">spoiler1 open</div>
<div class="class2">spoiler2 open</div>
<div class="class3">spoiler3 open</div>
.class1{
display: none;
}
spoiler1 .class1 {
display: block;
}
.class2{
display: none;
}
spoiler1 .class2 {
display: block;
}
.class3{
display: none;
}
spoiler1 .class3 {
display: block;
}
