Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2017, 13:58
Новичок на форуме
Отправить личное сообщение для vov555vov Посмотреть профиль Найти все сообщения от vov555vov
 
Регистрация: 02.07.2017
Сообщений: 2

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

<!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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2017, 14:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

vov555vov,
fadeIn заменить на fadeToggle и выкинуть строки 15-17
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2017, 12:26
Новичок на форуме
Отправить личное сообщение для vov555vov Посмотреть профиль Найти все сообщения от vov555vov
 
Регистрация: 02.07.2017
Сообщений: 2

Сообщение от рони Посмотреть сообщение
vov555vov,
fadeIn заменить на fadeToggle и выкинуть строки 15-17
Проблема не исчезла. Прозрачность блока сначала уменьшается от 1 до 0, а затем увеличивается до 1
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2017, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от vov555vov
Проблема не исчезла.
если тут проблем нет, смотрите что у вас не так, как здесь.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .form-zayavka {
    background-color: #6FA68C;
    border:3px solid #A61D82;
    display:none;
  }
  .pokaz-skryt-form {
    cursor: pointer;
    background-color: #5DA64E;
  }
  .pokaz-skryt-form:hover {
    color:#A61719;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
$(function() {
   $('.pokaz-skryt-form').click(function(){
      $('.form-zayavka').stop().fadeToggle();
    });
});
  </script>
</head>

<body>
<div class="pokaz-skryt-form">
  <p>Показать/скрыть форму заявки</p>
</div>

<div class="form-zayavka" >
  <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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
всплывающий блок при клике на input ChikiBOBONI (X)HTML/CSS 1 31.10.2016 11:40
Jquery - Циклическое изменение атрибутов элемента при клике на него mxup Общие вопросы Javascript 3 20.07.2016 20:11
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 9 26.08.2014 00:14
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 22:05