我正试图使用Javascript创建一个下拉登录框,但它无法使用我正在尝试的代码。
HTML:
<div id="links">
<div id="links-wrap">
<ul class="link">
<li>
<a class="link1" href="#">Link 1</a>
</li>
<li>
<a class="link2" href="#">Link 2</a>
</li>
<li>
<a class="link3" href="#">Login</a>
<div id="login_wrap">
<div class="login_menu">
<form action="" method="post">
Username:</br> <input id="username" type="text" name="username" size="16">
Password: <input id="password" type="password" size="16" autocomplete="off">
<br>
<input id="submit" type="submit" value="Login">
</form>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS:
.link {
color: #3e3e3e;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-decoration: none;
text-transform: uppercase;
float: left;
list-style-type: none;
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
#links-wrap {
float: right;
width: auto;
margin-top:-12px;
font-weight:600;
}
li {
padding-right:50px;
display:list-item;
text-align:-webkit-match-parent;
display : inline-block;
}
.login {
}
#username {
width:160px;
}
#password {
width:160px;
}
#submit {
margin-left:32.5%;
margin-top:10px;
}
.login_menu {
background-color:white;
border:1px solid black;
width: 180px;
height: 125px;
position: fixed;
margin-left: -60px;
margin-top:10px;
z-index:10;
font-size:10px;
}
#login_wrap {
margin-left:10px;
margin-top:10px;
visibility: hidden;
}
Javascript:
$(document).ready(function() {
$(".link3").click(function() {
$(this).children("#login_wrap").css("visibility","visible");
});
});
我已经尝试了以上代码的多种组合,但都无济于事,我相信有更多经验的人可能会帮助我
有人能帮我指出我做错了什么吗?
谢谢。
我修复了您的一些代码。下面是一个工作示例的链接。
然后代码中的主要错误是$(this).children("#login_wrap")
。语法没有错,但它需要是$(this).parent().children("#login_wrap")
,因为this
被封装在<a>
标记中。
这是我以前写的一个老例子。这一个可选地使用toggle
功能来添加更令人愉快的显示和关闭登录框的能力。
#login_wrap
不是$(".link3")
的子级。尝试:
$(".link3").click(function() {
$(this).siblings("#login_wrap").css("visibility","visible");
});
或者只是(因为div ID认为tio在DOM中是唯一的(:
$(".link3").click(function() {
$("#login_wrap").css("visibility","visible");
});
$(document).ready(function() {
$(".link3").click(function() {
$(this).parent().find("#login_wrap").toggle();
});
});
我建议先找父母,然后再找孩子。在这种情况下,父标记充当标记的上下文。这将创建一个更易于维护的代码。因为当您使用.siblings((或某些函数来查找登录控件时,您的javascript代码会耦合到标记的当前位置。将来,如果您修改位置,就像嵌套在1个级别中一样,您的代码将失败。如果页面上有多个控件,此代码仍然可以正常工作,并打开与链接关联的正确控件。
旁注:如果在页面上显示多个类似的控件,则不应使用id="login_wapped",而应改为class="login_waped"。