Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Показать скрыть слой (jQuery)

В jQuery есть несколько методов позволяющих скрыть или показать слой — это функции .show(), .hide(), .toggle().

Смотреть онлайн-пример

jQuery.show() / jQuery.hide()

Есть слой, который нужно одной кнопкой скрывать, другой показывать.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Показать скрыть слой (jQuery)</title>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#show").click(function () {
        $('#layer_show_hide').show();
    });
    
    $("#hide").click(function () {
        $('#layer_show_hide').hide();
    });
});

</script>
</head>

<body>

<input type="button" value=".hide() — Скрыть" id="hide"> <input type="button" value=".show() — Показать" id="show">

<div id="layer_show_hide">
<p><strong>Привет</strong></p>
<p>Этот слой управляется двумя кнопками! Кнопкой <strong>.show() — Показать</strong> и <strong>.hide() — Скрыть</strong></p>
</div>

</body>
</html>

jQuery.toggle()

Если нужно скрыть/показать слой одной кнопкой, то используем функцию .toggle().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Показать скрыть слой (jQuery)</title>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#toggle").click(function () {
        $('#layer_toggle').toggle();
    });
});

</script>
</head>

<body>

<input type="button" value=".toggle() — Переключатель" id="toggle">

<div id="layer_toggle">
<p><strong>Привет</strong></p>
<p>Этот слой управляется кнопкой <strong>.toggle() — Переключатель</strong></p>
</div>

</body>
</html>

Еще раз советую посмотреть пример онлайн.

Опубликовано: 14 октября 2011  ·  Автор: Артём Фёдоров  ·  10320 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryПоказать скрыть слой (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Так .toggle('fast') или .toggle('slow')
Артём Фёдоров · 4 года назад
С toogle все круто, только как сделать, чтобы появление было не внезапное, а плавное?
Вячеслав Мороз · 4 года назад
jQuery, Библиотеки, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания