我在使函数内部.click()完全执行时遇到麻烦。如果我把alert("Hello");它放在块之前，它会发出警报，但其余的将不会执行...
我希望在单击#loginPopTriggerdiv时#loginpop淡入另一个div 。然后，如果单击#loginpop或#closelogin，#loginpop淡出。
提前致谢！
这是我现在拥有的代码：
的HTML
<head>
<title>MainFrame</title>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../js/Java.js"></script>
<link href="stylesheets/Index.css" rel="stylesheet" type="text/css"/>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-input/">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
</head>
<body>
<div id="HeaderContainer">
<div id="loginPopTrigger">
<li>Login</li>
</div>
</div>
<div id="loginPop">
<div id="closelogin">
<span></span>
<span></span>
</div>
<div id="loginContainer">
<div id="title">
<div id="logologin"></div>...
</div>
<paper-input label="Email Address or ID" floatinglabel></paper-input>
<paper-input type="password" label="Password" floatinglabel></paper-input>
<div id="forgot">Forgot?</div>
<div id="LoginPageOptions">
<paper-checkbox id="staylogged">Stay Logged On</paper-checkbox>
<div id="googlelogin">Login with Google+</div>
</div>
<div id="LoginPageButtons">
<paper-button id="loginButton" raised>Login</paper-button>
<paper-button id="signupbutton" raised>Sign Up</paper-button>
</div>
</div>
</div>
的CSS
/*----------------------------------------- BASIC --------------------------------------*/
@font-face {
font-family: main;
src: url(Fonts/MGNORMAL.TTF);
}
a:link, a:visited {
color: #fff;
text-decoration: none;
}
body {
margin: auto;
width: 100%;
background-color: #2a2a2a;
}
/*----------------------------------------- HEADER --------------------------------------*/
#HeaderContainer {
position: relative;
height: 5%;
top: 2.5%;
left: 5%;
width: 90%;
}
#loginPopTrigger {
position: absolute;
font-family: main;
font-size: 20;
list-style: none;
color: #fff;
font-size: 18;
left: 90%;
top: 28%;
cursor: pointer;
}
#loginPopTrigger:hover {
opacity: 0.4;
}
/*----------------------------------------- LOGIN POPUP --------------------------------------*/
#loginpop {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-color: rgb(242, 242, 242);
height: 100%;
width: 100%;
}
#loginContainer {
position: absolute;
width: 16%;
height: 20%;
left: 42%;
top: 35%;
font-family: main;
color: #2a2a2a;
}
#title{
font-size: 35;
width: 100%;
text-align: center;
}
#forgot {
position: absolute;
font-family: roboto;
color: #2a2a2a;
font-size: 14;
top: 129;
left: 80%;
}
#LoginPageOptions{
width: 100%;
position: absolute;
top:;
}
#staylogged {
position: absolute;
left: 0;
--paper-checkbox-checked-color: var(--paper-black-500);
--paper-checkbox-checked-ink-color: var(--paper-black-500);
}
#googlelogin {
position: absolute;
top: 0;
right: 0;
}
#LoginPageButtons{
position: absolute;
top: 100%;
width: 100%;
}
#loginButton {
position: absolute;
left: 20%;
background: #000;
color: #fff;
}
#signupbutton {
position: absolute;
right: 20%;
}
/*-- CLOSE LOGIN POPUP --*/
#closelogin {
width: 40px;
height: 40px;
position: relative;
top: 2.6%;
left: 97%;
cursor: pointer;
}
#closelogin span {
position: absolute;
height: 1px;
width: 20;
background: #000;
margin: 24%;
}
#closelogin span:nth-child(1) {
top: 10;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#closelogin span:nth-child(2) {
top: 10;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
JS
$(document).ready(function () {
$('#loginPopTrigger').click(function () {
alert("Hello"); //This executes
$('#loginpop').fadeToggle(); //This does not
});
$("#closelogin").click(function () {
$('#loginpop').fadeToggle();
});
$("#loginpop").click(function () {
$(this).fadeToggle();
});
});
该id是错误的：
$('#loginPopTrigger').click(function () {
$('#loginPop').fadeToggle(); //This does not
});
$("#closelogin").click(function () {
$('#loginPop').fadeToggle();
});
$("#loginPop").click(function () {
$(this).fadeToggle();
});
更短的路
$('#loginPopTrigger, #closelogin, #loginPop').click(function () {
$('#loginPop').fadeToggle();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句