0

我有一个带有 jquery 的滑动面板登录框，它工作正常只有关闭链接在这里不起作用是 javascript 代码。

 <script type="text/javascript">
$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    })
})
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }

});

$("#login-close").click(function() {
$("#login-panel").hide(0);
return false;
});

</script>

这是HTML

<a id="login-link" href="#" title="Login">Login</a>   
<div id="login-panel">
<div style="padding-left:10px;width:190px; height:163px; background-color:#2a2a2a; text-align:left; vertical-align:text-top;">
<form id="login" action="<?php echo osc_base_url(true) ; ?>" method="post">
<table border="0" style="font: normal 10pt Tahoma; color:#fff;">
  <tr>
    <td height="20" valign="top">Email <br>
    <input id="email" type="text" value="" name="email"></td>
  </tr>
  <tr>
    <td height="20" valign="top">Password<br>
    <input id="password" type="password" value="" name="password">
  </tr>
   <tr>
  <td><input type="submit" name="submit" value="Sign In" /></td>
  </tr>
  <tr>
    <td height="25" valign="top">
     <small><a href="#login-close">press ESC or close</a></small></td>
  </tr>
</table>
</form>
</div>

它工作得很好，当我按下ESC时也会关闭登录框。但它没有在链接点击时关闭，它只在 url 中添加#login-close

谢谢

4

4 回答 4

1

您没有任何 id 为 login-close 的元素。尝试将您的关闭锚更改为：

<a href="#login-close" id="login-close">press ESC or close</a>

此外，请确保您的所有代码都在文档就绪函数中。

$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    });

    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            $("#login-panel").hide(0);
        }
    });

    $("#login-close").click(function() {
        $("#login-panel").hide(0);
        return false;
    });
});
于 2012-06-20T07:17:23.807 回答
0

这行得通吗？

$("#login-close").click(function(e) { // added e to function arguments
    e.preventDefault(); // added method here
    $("#login-panel").hide(0);
    // remove return false here.
});

还要在链接中添加一个 id：

<a id="login-close" href="#login-close">press ESC or close</a>

您的 JS（并非所有内容都在 ready 函数中）和 HTML（未关闭的标签）中有错误 - http://jsfiddle.net/dtctu/

于 2012-06-20T07:16:27.413 回答
0

你没有给你的链接一个ID，所以$("#login-close")找不到它。

添加id="login-close"到您的链接。

于 2012-06-20T07:17:26.733 回答
0

工作演示 http://jsfiddle.net/WhSTh/5/

id登录关闭丢失：我还添加<td>了丢失的内容

<td height="25" valign="top"> <small><a href="#login-close" id="login-close"> press ESC or close</a></small></td>

希望这会有所帮助，干杯！

代码

$(document).ready(function() {
    $("#login-link").click(function() {
        $("#login-panel").slideToggle(200);
    })
})
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }

});

$("#login-close").click(function() {
    $("#login-panel").hide(0);
    return false;
});​
于 2012-06-20T07:18:52.500 回答