Блог/Показать/скрыть элемент на странице

Показать скрыть элемент средствами jQuery (обновление)

Автор: Кудашев Сергей

Несколько лет назад написал статью, про то, как можно реализовать показ/сокрытие HTML элементов на странице средствами jQuery. С того времени прошло много времени, пришло переосознание некоторых вещей и техник, поэтому решил выложить обновленное решение.

Как и в прошлый раз данный функционал будем реализовывать средствами jQuery. Дублируем код из прошлой заметки:

Итак, в область <head> подключаем jquery:

<script src="jquery.min.js"></script>

В область <body> прописываем HTML код:

<a href="javascript:return false;" id="act">Показать текст</a>
<div id="hide">Скрытый текст</div>

А теперь используем обновленный код, который я применяю сейчас на своих проектах:

<script type="text/javascript">
$(document).ready(function() {
	$("#act").click(function (e) {
		e.preventDefault();
		if($(this).hasClass('active')){
			$('#hide').hide(120);
			$(this).removeClass('active');
		} else {
			$('#hide').show(240);
			$(this).addClass('active');
		}
	});	
});
</script>

Что же у нас поменялось? Во-первых, при работе со ссылками начал использовать e.preventDefault() для гарантированной отмены действия по умолчанию для ссылки, то есть при нажатии на нее мы гарантированно по ней не перейдем. Во-вторых, начал использовать подобие триггера, который показывал бы скрипту, находится ли элемент в состоянии показа или состоянии сокрытия. Данный момент у нас реализован через присваивание атрибута class="active". В-третьих, благодаря использованию триггера я смог отказать от использования .toggle(), что дает большую гибкость. Теперь, например, можно заменить .hide()/.show() на .animate() или другой метод манипулирования элементами, которые позволят нам сделать более интересные эффекты, чем простое сокрытие.

Лично для меня было очень поучительно сравнить старый и новый код, и понять, как понимание некоторых вещей и техник меняет код. И главное, меняет его гибкость и ширину применения.

Комментарии (0)