jQuery: скрыть все заголовки на странице при нажатии
События jQuery: упражнение 4 с решением
Скрыть все заголовки на странице, когда они нажаты.
Пример данных :
HTML:
<Тело> <H1> Заголовок-1 </ h1> <H2> Заголовок-2 </ h2> <H3> Заголовок-3 </ h3 >> </ Body>
Решение :
HTML-код:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Hide all headings on a page when they are clicked</title>
</head>
<body>
<h1>Heading-1</h1>
<h2>Heading-2</h2>
<h3>Heading-3</h3>
</body>
</html>
Код JavaScript:
$("h1,h2,h3" ).click(function() {
$( this ).slideUp();
});
Примечание. В jQuery slideUp ([duration] [, complete]) метод используется для скрытия совпадающих элементов с помощью скользящего движения. Он имеет следующий параметр:
- длительность: строка или число, определяющее, как долго будет выполняться анимация. [Тип: число или строка]
- complete: функция для вызова после завершения анимации. [Тип: Функция ()]
Демонстрация в реальном времени:
См. Pen jquery-events-упражнение-4 от w3resource ( @ w3resource ) в CodePen .
Внесите свой код и комментарии через Disqus.
Предыдущая: добавление элемента <p> с текстовым сообщением при изменении поля <input>.
Далее: дважды щелкните по абзацу, чтобы переключить цвет фона.
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code