Question

我正在尝试使用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");
  });

});

我尝试了上述代码的多种组合无济于事，我确信更多的经验可能对我有帮助。

有人可以帮助指出我做错了吗？

谢谢。

Answer 1

我修复了一些代码。 Here是一个工作示例的链接。

然后代码中的主要错误为$(this).children("#login_wrap")。语法没有任何问题，但它必须是$(this).parent().children("#login_wrap")，因为this包含在<a>标记中。

Here是我之前写的旧例子。这个也可以使用toggle功能添加更令人愉悦的显示和关闭登录框的功能。

Answer 2

#login_wrap不是$(".link3")的孩子。尝试：

$(".link3").click(function() {
    $(this).siblings("#login_wrap").css("visibility","visible");
});

或者只是（因为div ID在DOM中被认为是唯一的）：

$(".link3").click(function() {
    $("#login_wrap").css("visibility","visible");
});

Answer 3

$(document).ready(function() {

  $(".link3").click(function() {
     $(this).parent().find("#login_wrap").toggle();
  });

});

我建议先找父母，然后找孩子。在这种情况下，父级用作标记的上下文。这将创建一个更易于维护的代码。因为当您使用.siblings（）或某些函数来查找登录控件时，您的javascript代码会耦合到标记的当前位置。将来，如果你修改位置，比如嵌套在1个以上的级别，你的代码就会失败。如果您在页面上有多个控件，此代码仍然可以正常工作并打开与链接关联的正确控件。

旁注：如果您在页面上显示如下所示的多个控件，则不应使用id =“login_wrapped”，而应更改为class =“login_wrapped”。

使用Javascript下拉登录菜单

3 个答案: