.toggleClass(). Переключение на сайте. jQuery
Любое переключение (изменение внешнего вида туда-сюда по клику мыши) на сайте можно реализовать простой штуковиной .toggleClass() от jQuery.
Суть проста – по какому-нибудь событию (клику или наведению мыши, например) он добавляет или удаляет к определенному объекту новый класс. А этот новый класс в css вы можете оформить как душе угодно. Очень круто.
Например, какое-нибудь выезжающее меню можно сделать на этой штуке. Изначально оно спрятано, а торчит лишь иконка. Кликаешь по этой иконке – и оно появляется, то есть к нему добавляется новый класс, который делает его видимым.
Сам код следующий.
Например, у нас есть иконка (кнопка), которая торчит где-то справа на сайте, при нажатии на которую появляется новый блок с какой-то информацией внутри.
Её html-код:
<div class="call-button"> <button>Кнопка</button> <div> <p>Viber</p> <p>WhatsApp</p> <p>Vk</p> </div> </div>
Её css-код:
.call-button { position:fixed; bottom: 20%; right: 0; height: 150px; width: 150px; padding:0; background-color:green; color:#fff; transform:translateX(100px); transition:0.3s ease transform; } button { position:absolute; top:50px; left:-50px; height:50px; width:100%; cursor:pointer; transform: rotate(-90deg); z-index:999; } .call-button div { float:right; width:80px; padding:10px; } .call-button.open { transform:translateX(0); }
И простой скрипт, благодаря которому это всё и происходит.
$('button').click(function(){ $('.call-button').toggleClass('open'); })
Логика скрипта такая:
$(‘button’) – находится объект (тег) button, затем .click(function(){ – означает, что при клике мышкой по только что найденному объекту будет выполняться какая-нибудь функция, которая будет в фигурных скобках {}.
А внутри этой функции уже можно обратиться к любому другому объекту, с которым вы хотите что-либо сделать после этого клика мышки, в нашем случае это весь общий блок с классом call-button, который должен ездить туда -сюда, то есть пишем:
$(‘.call-button’) – теперь уже ищется объект с классом call-button, .toggleClass(‘open’) – на английском toggle означает тумблер, то есть вкл./выкл. То есть при каждом клике мышки класс прописанный в скобках (‘open’) будет то добавляться, то удаляться к тому объекту, к которому мы обратились, т.е. $(‘.call-button’).
А этот класс open в своих стилях css мы уже может обрисовать как угодно. Самое элементарное это добавлять и удалять display: none;
При нажатии на кнопку блок будет то показываться, то исчезать.
Но в моем случае нужно было, чтобы кнопка находилась справа и при клике мышкой выезжала, там показывалась некоторая инфа и снова при клике мышкой, заезжала обратно. Поэтому у меня стили заточены под перемещение.
Вот и всё по сути.