Question

我需要显示单词＆＃34; register＆＃34;和＆＃34;登录＆＃34;再次点击＆＃34; subheader＆＃34;除非你在输入中写一些东西......正是我要做的，只需点击子标题

＆＃13;

$(document).ready(function() {
    $('.register').click(function() {
        $('.register').hide();
 });
});
$(document).ready(function() {
    $('.registers').hide();
});
$(document).ready(function() {
    $('.register').click(function() {
        $('.registers').show();
 });
});

＆＃13;

.subheader {
	background: #F3F3F3;
	margin: 0 auto;
	width: 100%;
	height: 30px;

}
.register p {
	display: inline-block;
	float: right;
	color: #179B75;
	font-size: 12px;
	padding: 0;
	padding-right: 8px;
}
.register {
	display: block;
	left: 75%;
	position: fixed;
	top: 5px;
	z-index: 10005;
	height: 30px;
}
.register>p>input {
	width: 100px;
	height: 20px;
	border: 1px solid #c8c8c8;
	font-family: FuturaLight;
	text-indent: 20px;
	font-size: 12px;
	float: right;
	display: none;
	color: #179B75;
}
.register>p>input:enabled{
	cursor: text;
}
.forms {
	width: 400px;
	height: 30px;
	display:inline-block;
	float:right;
}
.registers {
	width: 400px;
	height: 30px;
	display: inline-block;
	float:right;
}
.registerformsleft {
	width: 130px;
	height: 25px;
	display: inline-block;
	position: inherit;
	float: left;
}
.registerformsright {
	width: 130px;
	height: 25px;
	display: inline-block;
	position: inherit;
	float: right;
}
.register {
	cursor:pointer;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Prueba</title>
    <link rel="stylesheet" href="css/Principal.css"/>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/jquery.bxslider.css" />
  </head>
  <body>
    <header>
          <div class="subheader">
            <div class="register">  
              <p>Login
              </p>
               <p>|</p>
              <p>Register</p>
            </div>
            <div class="forms">
              <form class="registers" action="demo_form.asp">
                <input class="registerformsleft" type="email" name="email" value="Email" placeholder="Format: algo@gmail.com" onfocus="if (this.value=='Email') this.value='';"><br>
                <input class="registerformsright" type="password" name="Password" size="10" value="Password" onfocus="if (this.value=='Password') this.value='';"><br>
                <input class="submit" type="submit" value="Submit">
              </form>
            </div> 
          </div>
    </header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="js/jquery.inputs.js"></script>
   </body>

＆＃13;

Answer 1

$(document).on('click', function(e) {
   var target = $(e.target);
   if(
      !target.hasClass('.subheader') && // Not .subheader clicked
      !target.parents('.subheader').length && // Not child of .subheader clicked
      !$('.registerformsleft').val().length && // Left input is empty
      !$('.registerformsright').val().length // Right input is empty
     ) {
       $('.registers').hide();
    }
});

Answer 2

您需要将JS更改为以下内容：

<强> Demo

$(document).ready(function() {
    $('.subheader').click(function() {
        $('.registers').hide();
    });

    $('.registers').hide();

    $('.register').click(function() {
        $('.registers').show();
        return false;
    });
});

Answer 3

我们必须使用blur，因此我们告诉jquery当上述类的输入失去焦点时，使用.forms隐藏div并使用类register显示div。

$('.registerformsright, .registerformsleft').on('blur', function() {
  $('.forms').hide();
  $('.register').show();
});

Answer 4

请尝试这个：

.subheader {
  background: #F3F3F3;
  margin: 0 auto;
  width: 100%;
  height: 30px;
}
.register p {
  display: inline-block;
  float: right;
  color: #179B75;
  font-size: 12px;
  padding: 0;
  padding-right: 8px;
}
.register {
  display: block;
  left: 75%;
  position: fixed;
  top: 5px;
  z-index: 10005;
  height: 30px;
}
.register>p>input {
  width: 100px;
  height: 20px;
  border: 1px solid #c8c8c8;
  font-family: FuturaLight;
  text-indent: 20px;
  font-size: 12px;
  float: right;
  display: none;
  color: #179B75;
}
.register>p>input:enabled {
  cursor: text;
}
.forms {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registers {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registerformsleft {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
  float: left;
}
.registerformsright {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;

}
.register {
  cursor: pointer;
}

Demo

问题点击输入

4 个答案: