Question

我是php和javascript的新手，我正在编写我的第一个网页程序。我正在尝试添加登录功能。预期的行为是：只要鼠标光标位于帐户图标上，它就会显示登录选项。用户登录后，再次将光标移到帐户图标上，将显示配置文件选项。但是，实际行为是：一旦用户登录，并再次将光标移到帐户图标上，它就不会显示配置文件选项，除非将光标精确地移动到account_icon的顶部/底部边框上。似乎只有account_icon的顶部和底部边框可以触发鼠标事件。我必须刷新页面（F5），然后才能正常工作。

我添加了“header（”Location：index.php“）;”为了刷新页面，但它仍然无法正常工作。只有F5可以解决这个问题。我搜索了很多相关问题并尝试了很多东西，但我仍然找不到解决方案来解决这个问题。我想知道是否有人可以帮我解决这个问题或给我任何建议？我真的很感激。

我的代码如下所示。如果您需要更多信息，请与我们联系。

Php Code index.php：

if(isset($_POST['submit_login']) && !empty($_POST['submit_login']))
{
    if($_POST['email_login'] && $_POST['password_login'])
    {
        $query = "SELECT user_id, email, password FROM user_login WHERE email='{$_POST['email_login']}' AND password='{$_POST['password_login']}'";

        if($query_run = mysql_query($query))
        {
            if(mysql_num_rows($query_run) != NULL)
            {
                while($query_row = mysql_fetch_assoc($query_run))
                {
                    $user_id = $query_row['user_id'];
                    $email = $query_row['email'];
                    $password = $query_row['password'];

                    $_SESSION['logged_in'] = true;
                    $_SESSION['user_id'] = $query_row['user_id'];
                    $_SESSION['email'] = $query_row['email'];
                    $_SESSION['password'] = $query_row['password'];

                    header("Location: index.php");
                }
            }
            else
            {
                echo "Can't find";
            }
        }
        else
        {
            echo mysql_error();
        }
    }
    else
    {
        // the username or password is not filled in
        die(mysql_error());
    }
}

    <div id="account">
        <img id="account_icon" src="accountIcon.png" alt="account">
        <div class="account_infobox">
            <ul>
                <?php
                    if(!isset($_SESSION['logged_in'])):

                ?>
                <li class="account_info signin">
                    <a class="account_btn" id="signin_btn" href="javascript:void(0)">Log In</a>
                </li>
                <li class="account_info signup">
                    <a class="account_btn" id="signup_btn" href="javascript:void(0)">Sign Up</a>
                </li>

                <?php
                    else:
                ?>

                <li class="account_info profile">
                    <a class="account_btn" id="profile_btn" href="?profile">Profile</a>
                </li>
                <li class="account_info signoff">
                    <a class="account_btn" id="signoff_btn" href="?logoff">Log Off</a>
                </li>

                <?php
                    endif;
                ?>
            </ul>
        </div>
    </div>

Javascript代码：

$(document).ready(function(){
    $("#account_icon").mouseenter(function(){
        $(".account_infobox").slideDown(100);
    });

    $("#account").mouseleave(function(){
        $(".account_infobox").slideUp(100);
    });

    $("#signin_btn").click(function(){
        $(".login_dialog").show();
    });

    $("#signup_btn").click(function(){
        $(".signup_dialog").show();
    });
});

CSS代码

#account {
    position: absolute;
    height: 50px;
    left: calc((100% - 1200px) / 2 + 1200px - 80px);
    width: 60px;
    margin-top: 5px;

    border: 2px solid yellow; /* Only use this border for layout debugging */
}

#account_icon {
    position: absolute;
    left: 10px;
    width: 40px;
    height: 40px;
    z-index: 1100;
    border: 2px solid red; /* Only use this border for layout debugging */
}

.account_infobox {
    display: none;
    position: fixed;
    left: calc((100% - 1200px) / 2 + 1200px - 200px);
    top: 53px;
    width: 200px;
    height: 60px;    
    background: #333333;    
    border: 2px solid blue; /* Only use this border for layout debugging */
}

Answer 1

你给header()的那一刻停止执行以使其有效：

while($query_row = mysql_fetch_assoc($query_run))
{
    $user_id = $query_row['user_id'];
    $email = $query_row['email'];
    $password = $query_row['password'];

    $_SESSION['logged_in'] = true;
    $_SESSION['user_id'] = $query_row['user_id'];
    $_SESSION['email'] = $query_row['email'];
    $_SESSION['password'] = $query_row['password'];

    header("Location: index.php");
    die();
}

这样，它会发送标题和浏览器刷新页面。

Answer 2

在您的jquery中，您需要使用hover和blur事件：

更新了代码

$(document).ready(function(){
    $("#account_icon").hover(function(){
        $(".account_infobox").slideDown(100);
    });

    $("#account").blur(function(){
        $(".account_infobox").slideUp(100);
    });

    $("#signin_btn").click(function(){
        $(".login_dialog").show();
    });

    $("#signup_btn").click(function(){
        $(".signup_dialog").show();
    });
});

Javascript mouseenter（）无法正常工作

2 个答案: