Question

我正在尝试为用户创建注册/登录覆盖，尽管在尝试使用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;
 }

Answer 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>

Answer 2

您正在使用名为.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

.toggle（）函数无法正常运行

2 个答案: