Проверка на видимость блока в jquery

427

24 ноября 2016, 10:00

Добрый день! Есть наполовину рабочий код, не могу понять, где ошибка.

$(document).ready(function(){ 
 
    $('#login-trigger').click(function () { 
        $("#login-content").toggle("slide"); 
        
    }); 
   
 
if ($("#login-content2").is(":hidden")){ 
 
 	$('#signup').click(function () { 
	        $("#login-content2").toggle("slide") 
	        $("#login-content").hide(); 
    }); 
	   
} 
	  else{ 
	 	$('#login-trigger').click(function () { 
        	$('#login-content2').hide();        	 
       }); 
	  } 
 
       
});

*{ 
  margin: 0; 
  padding: 0; 
} 
nav ul { 
  margin: 0; 
  list-style: none; 
  position: relative; 
  float: right; 
  background: #2980b9; 
} 
nav li { 
  float: left;           
} 
 
nav #login-trigger{ 
  display: inline-block; 
  zoom: 1; 
  padding: 10px; 
} 
#signup{ 
    display: inline-block; 
    margin-top: 10px; 
    color: white; 
} 
 
nav #login-content, #login-content2{ 
  display: none; 
  position: absolute; 
  top: 0px; 
  right: 0; 
  z-index: 999; 
  background: #3498db; 
  padding: 15px; 
} 
 
nav li #login-content, #login-content2{ 
  right: 46px; 
  width: 250px; 
} 
 
/*--------------------*/ 
 
 
#login #submit { 
  background: #2980b9; 
  border: none; 
  float: left; 
  height: 30px; 
  padding: 0; 
  width: 100px; 
  cursor: pointer; 
  color: #fff; 
} 
 
#login #submit:hover, 
#login #submit:focus { 
  background-color: #1476b7; 
}  
 
#login #submit:active {    
  outline: none; 
} 
 
#login #submit::-moz-focus-inner { 
  border: none; 
} 
 
#login label { 
  float: right; 
  line-height: 30px; 
  color: white; 
} 
 
#login label input { 
  position: relative; 
  top: 2px; 
  right: 2px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Flyout login form</title> 
	<link rel="stylesheet" href="style/main.css"> 
	<link rel="stylesheet" href="style/font-awesome.min.css"> 
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
 
<body> 
 
	<nav> 
		<ul> 
			<li id="login"> 
				<a id="login-trigger" href="#"> 
					<i class="fa fa-key" aria-hidden="true"></i> 
				</a> 
				<div id="login-content"> 
					<form> 
						<fieldset id="inputs"> 
							<input id="username" type="email" name="Email" placeholder="email" required>    
							<input id="password" type="password" name="Password" placeholder="password" required> 
						</fieldset> 
						<fieldset id="actions"> 
 
								<input type="submit" id="submit" value="Enter"> 
								<label><input type="checkbox" checked="checked"> remember</label> 
								<div style="clear:both;"></div> 
							    <a id="signup" href="#">SignUp</a> 
						</fieldset> 
					</form> 
				</div> 
 
				<div id="login-content2"> 
					<form> 
						<fieldset id="inputs"> 
							<input id="firstname" type="text" name="firstname" placeholder="first name" required>   
							<input id="lastname" type="text" name="lastname" placeholder="last name" required>   
							<input id="username" type="email" name="Email" placeholder="email" required>    
							<input id="password" type="password" name="Password" placeholder="password" required> 
						</fieldset> 
						<fieldset id="actions"> 
							<input type="submit" id="submit" value="Enter"> 
							<label><input type="checkbox" checked="checked"> remember</label> 
						</fieldset> 
					</form> 
				</div> 
 
			</li> 
			 
		</ul> 
	</nav> 
 
<script src="script.js"></script> 
 
</body> 
</html>

Логика работы такова:

Нажимаем на верхнюю квадратную кнопку и появляется форма авторизации. Если пользователь не авторизован — нажимает регистрацию "SignUp" Форма авторизации закрывается, открывается рега.

И теперь самое главное:

Если пользователь передумал, то при клике на тот же квадрат или в любой области экрана, где нет формы — всё должно закрываться.

Буду очень благодарен за помощь!

Answer 1

Вы задаете для кнопки разные события click, исходя из того, виден ли сейчас блок.

Попробуйте такой подход:

$('#signup').click(function () {
    if ($("#login-content2").is(":hidden")){
        $("#login-content2").toggle("slide");
        $("#login-content").hide();       
    }
    else
    {
        $('#login-content2').hide();            
    }
});

Что там в коде произошло - мы повесили на элемент один обработчик, который проверяет спрятан ли элемент и выполняет действия исходя из этого.

В вашем случае же было так:

Слайдим туда-сюда #login-content2 и постоянно прячем #login-content.

При этом, обработчик click на #login-trigger не вешается, поскольку инструкция if выполняется только один раз, когда загружается страница и обработчик на #login-trigger скорее всего не попадет.

В том случае когда пользователь передумал:

$(document).click(function(){
    $('#content').hide();
});

Можно так же попробовать сделать блок-подложку на весь экран, когда у Вас вызывается модальное окно и при нажатии на него будет закрываться модальное окно, тем самым создавая нужный Вам эффект.

Это, кстати, можно легко сделать при использовании бутстраповских модальных окон.

p.s. Код не гарантированно рабочий - но направить Вас я думаю должен.

Answer 2

$(document).ready(function(){   
   
    $('#login-trigger').click(function () { 
      $('.fon').fadeIn(0); 
        $("#login-content").toggle("slide"); 
       $("#login-content2").hide(0); // при нажатии на квадрат прячем вторую форму 
    }); 
   
 	$('#signup').click(function () { 
	        $("#login-content2").toggle("slide"); 
	        $("#login-content").hide(); 
    }); 
   
  $('.fon').click(function () { // при нажатии на пустую область прячем все 
     $("#login-content2").hide(0); 
     $("#login-content").hide(0); 
     }); 
});

*{ 
  margin: 0; 
  padding: 0; 
} 
nav ul { 
  margin: 0; 
  list-style: none; 
  position: relative; 
  float: right; 
  background: #2980b9; 
} 
nav li { 
  float: left;           
} 
 
nav #login-trigger{ 
  display: inline-block; 
  zoom: 1; 
  padding: 10px; 
} 
#signup{ 
    display: inline-block; 
    margin-top: 10px; 
    color: white; 
} 
 
nav #login-content, #login-content2{ 
  display: none; 
  position: absolute; 
  top: 0px; 
  right: 0; 
  z-index: 999; 
  background: #3498db; 
  padding: 15px; 
} 
 
nav li #login-content, #login-content2{ 
  right: 46px; 
  width: 250px; 
} 
 
/*--------------------*/ 
 
 
#login #submit { 
  background: #2980b9; 
  border: none; 
  float: left; 
  height: 30px; 
  padding: 0; 
  width: 100px; 
  cursor: pointer; 
  color: #fff; 
} 
 
#login #submit:hover, 
#login #submit:focus { 
  background-color: #1476b7; 
}  
 
#login #submit:active {    
  outline: none; 
} 
 
#login #submit::-moz-focus-inner { 
  border: none; 
} 
 
#login label { 
  float: right; 
  line-height: 30px; 
  color: white; 
} 
 
#login label input { 
  position: relative; 
  top: 2px; 
  right: 2px; 
} 
 
 
/* стили для невидимого слоя */ 
.fon { 
position: absolute; 
  width: 100%; 
  height: 100%; 
  display: none; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Flyout login form</title> 
	<link rel="stylesheet" href="style/main.css"> 
	<link rel="stylesheet" href="style/font-awesome.min.css"> 
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
 
<body> 
   
  <!-- добавляем невидимый слой --> 
<div class="fon"></div> 
  <!--  --> 
   
   
	<nav> 
		<ul> 
			<li id="login"> 
				<a id="login-trigger" href="#"> 
					<i class="fa fa-key" aria-hidden="true"></i> 
				</a> 
				<div id="login-content"> 
					<form> 
						<fieldset id="inputs"> 
							<input id="username" type="email" name="Email" placeholder="email" required>    
							<input id="password" type="password" name="Password" placeholder="password" required> 
						</fieldset> 
						<fieldset id="actions"> 
 
								<input type="submit" id="submit" value="Enter"> 
								<label><input type="checkbox" checked="checked"> remember</label> 
								<div style="clear:both;"></div> 
							    <a id="signup" href="#">SignUp</a> 
						</fieldset> 
					</form> 
				</div> 
 
				<div id="login-content2"> 
					<form> 
						<fieldset id="inputs"> 
							<input id="firstname" type="text" name="firstname" placeholder="first name" required>   
							<input id="lastname" type="text" name="lastname" placeholder="last name" required>   
							<input id="username" type="email" name="Email" placeholder="email" required>    
							<input id="password" type="password" name="Password" placeholder="password" required> 
						</fieldset> 
						<fieldset id="actions"> 
							<input type="submit" id="submit" value="Enter"> 
							<label><input type="checkbox" checked="checked"> remember</label> 
						</fieldset> 
					</form> 
				</div> 
 
			</li> 
			 
		</ul> 
	</nav> 
 
<script src="script.js"></script> 
 
</body> 
</html>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как закрыть меню при клике вне него и при повторном клике на гамбургер?

При клике на кнопку открывается меню. При клике вне меню оно закрывается.

994

jQuery

JS выбор блока контента внешней ссылкой

На главной странице (stom-mva ru) одни пункты меню(ссылки) ведут на другие страницы, другие пункты - меняют на div'ы (основной "контент") с помощью этого...

411

jQuery

Добавление panel в panel-group bootstrap

Пытаюсь создать новую категорию. Отправляю ее на сервер для сохранения в базе, и если success,то хочу добавить ее ко всем остальным в panel-group.

366

jQuery

unexpected token & при вызове метода html()

Есть блок script на html странице. .

389