为登录表单创建 jQuery 下拉功能

Question

我一直在尝试更换我基于订阅的 WordPress 网站上的一个过时的插件，直到现在，它一直让我能够将我的登录表单嵌入到主页上，并且该表单能够在可以切换为打开和关闭的下拉列表中（并且它最初在网站首次加载时显示为关闭）。

我想要的是：一个短语 ("Login & Account Details")，单击它会显示一个包含登录表单的下拉列表；再次点击 collapses/closes 下拉菜单。

我在 WordPress 论坛 (https://wordpress.org/support/topic/add-custom-login-form-to-navigation?replies=3#post-8649379) 中找到了以下内容，并对其进行了调整以满足我的需要。

我在我的子主题的 functions.php 文件中添加了：

jQuery(function() {
    jQuery('#form-toggle').click(function() {
        jQuery('#login-form').toggle();
    });
});

我在首页添加了：

<div id="form-toggle">Login & Account Details</div>
<div id="login-form">
[login_form]
</div>

我在自定义中添加了css:

#login-form {
display: none;
}

#form-toggle {
cursor: pointer;
}

然而，当我实施它时，它显示 "Login & Account Details" 和登录表单默认也是可见的。单击 "Login & Account Details" 时，下拉菜单 collapses/closes，再次单击时，下拉。

有什么方法可以使用上面的代码，但要调整它，使下拉菜单不会默认展开，而是仅在单击 "Login & Account Details" 文本后出现？

或者是否有其他方法可以完成我想做的事情？我对 jQuery 非常非常陌生。感谢您的帮助！

Answer 1

替换

jQuery(function() {
    jQuery('#form-toggle').click(function() {
        jQuery('#login-form').toggle();
    });
});

与

jQuery(document).ready(function(){
       jQuery('#login-form').hide();
       jQuery('#form-toggle').click(function() {
            jQuery('#login-form').toggle();
       });
    });

为登录表单创建 jQuery 下拉功能

Create jQuery Dropdown Function for Login Form

wordpress

jquery

dropdown