.toggleClass(). Переключение на сайте. jQuery

Любое переключение (изменение внешнего вида туда-сюда по клику мыши) на сайте можно реализовать простой штуковиной .toggleClass() от jQuery.

Суть проста – по какому-нибудь событию (клику или наведению мыши, например) он добавляет или удаляет к определенному объекту новый класс. А этот новый класс в css  вы можете оформить как душе угодно. Очень круто.

Например, какое-нибудь выезжающее меню можно сделать на этой штуке. Изначально оно спрятано, а торчит лишь иконка. Кликаешь по этой иконке – и оно появляется, то есть к нему добавляется новый класс, который делает его видимым.

Сам код следующий.

Например, у нас есть иконка (кнопка), которая торчит где-то справа на сайте, при нажатии на которую появляется новый блок с какой-то информацией внутри.

Её html-код:

Её css-код:

И простой скрипт, благодаря которому это всё и происходит.

Логика скрипта такая:

$(‘button’) – находится объект (тег) button, затем .click(function(){ – означает, что при клике мышкой по только что найденному  объекту будет выполняться какая-нибудь функция, которая будет в фигурных скобках {}.

А внутри этой функции уже можно обратиться к любому другому объекту, с которым вы хотите что-либо сделать после этого клика мышки, в нашем случае это весь общий блок с классом call-button, который должен ездить туда -сюда, то есть пишем:

$(‘.call-button’) – теперь уже ищется объект с классом call-button, .toggleClass(‘open’) – на английском toggle означает тумблер, то есть вкл./выкл. То есть при каждом клике мышки класс прописанный в скобках (‘open’) будет то добавляться, то удаляться к тому объекту, к которому мы обратились, т.е. $(‘.call-button’).

А этот класс open в своих стилях css мы уже может обрисовать как угодно. Самое элементарное это добавлять и удалять display: none;

При нажатии на кнопку блок будет то показываться, то исчезать.

Но в моем случае нужно было, чтобы кнопка находилась справа и при клике мышкой выезжала, там показывалась некоторая инфа и снова при клике мышкой, заезжала обратно. Поэтому у меня стили заточены под перемещение.

Вот и всё по сути.

 

Читайте также:

Оставить комментарий

avatar
  Подписаться  
Уведомление о