TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

toggle() – переключатель на jQuery (или действие при повторном клике)

2 976

.toggle() отличная функция которая позволяет создавать красивые javascript эффекты для элементов страницы. Достаточно часто для того чтобы организовать то или иное действие анимации или других объектов веб дизайна при нажатии, или при повторном нажатии на блочном элементе( или не блочном) страницы, начинающим мастерам тяжело что именно нужно прописать jQuery скрипта

Содержимое записи:

  1. Описание скрипта и его работы
  2. Код скрипта
  3. Видео объясняющее как .toggle()

В данном примере div#Uslugi_nzhnii_blok является кнопка к которой прикриплено действие, В данном случае это появление блоков при первом клике, и скрытие их при повторном клике. Как видно из кода при первом клике тайтл кнопки имеет текст “Показать категорию ремонта”, при повторном клике этот текст меняется на “Скрыть категорию”.

В скрипте ниже используется метод .fadeOut() для того чтобы красиво скрыть элементы при втором клике, и метод .show() который помогает отобразить блоки при первом крике.

jQuery(function($){ $('div#Uslugi_nzhnii_blok').toggle( function(e){ $('div#USLUGI_1').show({"display": "block"}, 700); $('div#USLUGI_2').show({"display": "block"}, 700); $(this).find('span.creative_title').text('СКРЫТЬ КАТЕГОРИИ'); }, function(e){ $('div#USLUGI_1').fadeOut( "slow", function() { // Animation complete. }); $('div#USLUGI_2').fadeOut( "slow", function() { // Animation complete. }); $(this).find('span.creative_title').text('ПОКАЗАТЬ КАТЕГОРИИ РЕМОНТА'); } ); })

Обратите внимание что данный метод работает хорошо и на мобильных устройствах. то есть при касание экрана с данным скриптом не возникнет никаких проблем.

На этом всё, если вам понравилась статья поставьте лайк, ниже видео которое разъяснит Вам о переключателе более подробней.

Более подробней о .toggle() Вы можете узнать здесь

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее