Показать/скрыть блок div при клике

@vov555vov · Регистрация: 02.07.2017

Студворк — интернет-сервис помощи студентам

Добрый день! Пробую сделать штуку на jQuery, чтобы при щелчке мыши по надписи "Показать/скрыть форму заявки" появлялся блок с формой, а при повторном щелчке по надписи этот блок "прятался". Написал код, но проблема в том, что при щелчке мыши блок с формой появляется и потом сразу исчезает. В чем моя ошибка?

HTML5
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title>Показать/скрыть форму</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
 
[JS]<script type="text/javascript">
    $('document').ready(function(){
        $('.pokaz-skryt-form').click(function(){
            $('.form-zayavka').fadeIn();
        });
        $('.pokaz-skryt-form').click(function(){
            $('.form-zayavka').fadeOut();
        });
    });
 
 
</script>[/JS]
 
<style type="text/css">
    .form-zayavka {
        background-color: #6FA68C;
        border:3px solid #A61D82;
    }
    .pokaz-skryt-form {
        cursor: pointer;
        background-color: #5DA64E;
    }
    .pokaz-skryt-form:hover {
        color:#A61719;
    }   
</style>
 
<div class="pokaz-skryt-form">
    <p>Показать/скрыть форму заявки</p>
</div>
 
<div class="form-zayavka" style="display:none;">
    <form action="#" method="POST" name="zayavka" class="zayavka">
        Введите ваше имя:
        <p>
            <input type="text" name="name" class="name-form">
        </p>
        <p>
            Ваш телефон:
        </p>
        <p>
            <input type="text" name="phone" class="phone-form">
        </p>
        <p>
            <input type="submit" name="submit-otpravit" value="Отправить" class="submit-otpravka">
        </p>
    </form>
</div>
 
 
 
</body>
</html>

@Asiman · 02.07.2017, 17:08

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $('document').ready(function(){
        $('.pokaz-skryt-form').click(function(){
            if ($(".form-zayavka").is(":visible") == true) {
                $('.form-zayavka').hide();
            }
            else
            {
                $('.form-zayavka').show();                
            }
        });
    });
</script>

@vov555vov · 04.07.2017, 12:25 **[ТС]**

Проблема не решена. Блок так же появляется и сразу исчезает.

Добавлено через 1 минуту
Прозрачность блока уменьшается от 1 до 0, а затем увеличивается от 0 до 1

@kolyaplankton · 04.07.2017, 14:23

Ссылка на песочницу
https://codepen.io/anon/pen/OgZGpe

В Вашем случае я думаю ошибка в том, что вы дважды вызываете функцию click при этом в двух случаях задает противоположные по смыслу свойства

То есть вы фактически написали, чтобы при клике:
1) область появлялась

JavaScript
1
2
3
$('.pokaz-skryt-form').click(function(){
            $('.form-zayavka').fadeIn();
        });

2) код продолжает спускаться и находит строчку, чтобы при клике область пропала

JavaScript
1
2
3
$('.pokaz-skryt-form').click(function(){
            $('.form-zayavka').fadeOut();
        });

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .