Скрыть или показать элемент с помощью jQuery

Количество просмотров: 2077

Для того чтобы реализовать функционал скрытия или показа выбранных элементов мы будем использовать популярную JS библиотеку jQuery, убедитесь, что она используется в вашем проекте, если нет, то ее можно взять тут.

Итак начнем, нам требуется скрыть или показать элемент веб страницы по клику. Для примера будем использовать следующую разметку.


<div class="container">
<div class="item">
Этот div мы будем скрывать или показывать по клику
</div>
<button>Скрыть/показать</button>
</div>

 

Разметка довольно простая и часто встречается на многих проектах в сети. Теперь приступим к реализации скрытия и появления элемента.


 $('.container button').on('click',function(){
 	$(this).siblings('.item').toggle(); 
 	});
// по .container button мы выбираем элемент button вложенный в контейнер с классом container 
// далее по клику на данном элементе мы находим соседа с классом item и изменяем его видимость 
 
 

Этот div мы будем скрывать или показывать по клику

Рассмотрим код немного подробнее, в первой строке мы выбираем с помощью селекторов button лежащую в элементе с классом container и вешаем на кнопку событие мыши click, а так же функцию обработчик данного события. Данная функция запоминает по какой кнопке был сделан клик, ищет соседа с классом item и скрывает или показывает его в зависимости от его текущего состояния.

Тоже самое можно было написать и следующим образом:


 $('.container button').on('click',function(){
 	if($(this).siblings('.item').is(":visible")){
 		$(this).siblings('.item').hide();
 	}
 	else $(this).siblings('.item').show();
 });

В данном коде мы добавили проверку на видимость элемента, если он виден, то скроем его по клику при помощи метода hide(), если нет, то наоборот отобразим на странице с помощью метода show().

При желании можно изменить скорость исчезновения или появления, для этого достаточно передать в соответствующий метод количество миллисекунд в течении которого будет длиться анимация. Например, изменим строчку $(this).siblings('.item').show(2000); и посмотрим как изменилась скорость появления элемента на странице.

Так же, данные методы принимают в качестве парематров значения 'slow' и 'fast', slow равен 600 мс, fast = 200 мс, при этом скорость работы метода без параметров по умолчанию равна 400 мс.

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

Если у вас появились какие-то вопросы или что-то не получается то пишите комментарии, постараемся вам помочь.

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх