-5

我正在尝试为用户创建一个注册/登录覆盖，尽管在尝试使用 JQuery .toggle() 时我没有运气。我看不到任何明显的问题，并且我所做的任何细微调整都不成功。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
    <div class="nav">
        <div class="nav-container">
            <b>Photography</b><beta>BETA</beta>
            <div class="nav-options">
                <a href="" id="toggle-reg"><i class="icon-user"></i>Register</a>
                <ul class="register">
                        Username
                        <input type="text"/>
                        Password
                        <input type="text"/>
                        <button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
                </ul>
                <a href="">User CP</a>
                <a href="">Images</a>
                <a href="">Home</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.register').hide();
        $('#toggle-reg').click(function() {
            $('.register').toggle(slow);
        });
    });

    </script>
</body>

CSS：

     .register {
    background: #fff;
    padding: 15px;
    position: absolute;
    width: 220px;
    border: 2px solid #f1f1f1;
    -moz-box-shadow: 0 0 5px #f1f1f1;
    -webkit-box-shadow: 0 0 5px#f1f1f1;
    box-shadow: 0 0 5px #f1f1f1;
    top: 50px;
 }
4

2 回答 2

1

核实。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
    <style>
            .register {
    background: #fff;
    padding: 15px;
    position: absolute;
    width: 220px;
    border: 2px solid #f1f1f1;
    -moz-box-shadow: 0 0 5px #f1f1f1;
    -webkit-box-shadow: 0 0 5px#f1f1f1;
    box-shadow: 0 0 5px #f1f1f1;
    top: 50px;
 }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-container">
            <b>Photography</b><beta>BETA</beta>
            <div class="nav-options">
                <a href="javascript:;" id="toggle-reg"><i class="icon-user"></i>Register</a>
                <ul class="register">
                        Username
                        <input type="text"/>
                        Password
                        <input type="text"/>
                        <button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
                </ul>
                <a href="">User CP</a>
                <a href="">Images</a>
                <a href="">Home</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.register').hide();
        $('#toggle-reg').click(function() {
            $('.register').toggle('slow');
        });
    });

    </script>
</body>

于 2016-01-05T04:41:22.603 回答
0

您正在.toggle()使用一个未定义的变量调用slow：

$('.register').toggle(slow);

您需要传递字符串 "slow"：

$('.register').toggle("slow");

您可能需要取消默认点击行为和/或将链接更改href=""为href="#"：

    $('#toggle-reg').click(function(e) {
        $('.register').toggle("slow");
        e.preventDefault();
    });

演示：http: //jsfiddle.net/PDaej/1

于 2013-05-07T21:07:58.200 回答