我的点击登录在网页上不起作用

My click on login is not working on webpage

本文关键字：网页不起作用登录我的更新时间：2023-09-26

我为wordpress的一个客户开发了一个网站。我编写了HTML、CSS和Javascript，点击登录按钮，下拉菜单就会下拉。onclick函数一直在工作，但现在不行了。我不明白为什么它不起作用。该网站http://outsourceyourjobsearch.com/builder/.由于他为自己的网站选择了主题，我不得不把所有的代码都写在一个文件上。

<!DOCTYPE html> 
<html>
<head>
    <style>
        .dropbtn { 
            background-color: #4CAF50; 
            color: white; 
            padding: 16px;
            font-size: 16px; 
            border: none; 
            cursor: pointer;
        } 
        .dropbtn:hover, .dropbtn:focus { 
            background-color: #3e8e41; 
        } 
        .dropdown {
            position: relative; 
            float: right;
            margin-right: 200px; 
        } 
        .dropdown-content { 
            display: none;
            position: absolute; 
            background-color: #f9f9f9;
            min-width: 160px; 
            overflow: auto; 
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);'
        }
        .dropdown-content a {
            color: black; 
            padding: 12px 16px;
            text-decoration: none; 
            display: block;
        }
        .dropdown a:hover {
            background-color: #f1f1f1
        }
        .show {
            display:block;
        }
        .button:hover span:after { 
            opacity: 1; right: 0;
        }
        .button span { 
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s; 
        } 
        .button {
            width: 131px;
            background-color: white;
            color: black;
            border: 2px solid #008CBA;
            font-size: large;
            margin-top: 8px;
            margin-right: 75px;
        } 
        .login-form{
            width: 300px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
        } 
        input{ 
            font-size: large;
            margin-top: 8px; 
        }
        .register { 
            margin-left: 25px;
            text-decoration: none; 
            font-size: small; 
            width: 80px;
        }
        .password{
            margin-left: 126px; 
            margin-top: -69px; 
            text-decoration: none; 
            font-size: small;
        } 
        a:link { 
            text-decoration: none;
        } 
        a:visited { 
            text-decoration: none;
        }
        a:active {
            text-decoration: underline;
        }
        center{
            display: inline;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
    </head> 
    <body>
       <div class="dropdown">
           <button onclick="myFunction()" class="dropbtn" >
            Log In
        </button> 
        <div id="myDropdown" class="dropdown-content"> 
            <form class="login-form"> 
                <input type="text" placeholder="username"/> 
                <input type="password" placeholder="password"/>
                <button class ="button">login</button> 
                <div class = "center">
                    <p><a     href="http://outsourceyourjobsearch.com/membership-account/membership-levels/" class="register">Register</a></p> <p><a href="http://outsourceyourjobsearch.com/wp-login.php?action=lostpassword" class="password">Forgot Password?</a></p>
                </div>      
            </form> 
        </div> 
    </div> 
    <script>
    /* When the user clicks on the button, toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    /* Close the dropdown if the user clicks outside of it */
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
    </script>
</body> 
</html>

您在网站中使用的结构不正确。我检查了它，在你使用的块中，它的html是：

<div class="et_pb_fullwidth_code et_pb_module  et_pb_fullwidth_code_0">
            <!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; float: right; margin-right: 200px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);' } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #f1f1f1 } .show { display:block; } .button:hover span:after { opacity: 1; right: 0; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button { width: 131px; background-color: white; color: black; border: 2px solid #008CBA; font-size: large; margin-top: 8px; margin-right: 75px; } .login-form{ width: 300px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } input{ font-size: large; margin-top: 8px; } .register { margin-left: 25px; text-decoration: none; font-size: small; width: 80px; } .password{ margin-left: 126px; margin-top: -69px; text-decoration: none; font-size: small; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:active { text-decoration: underline; } center{ display: inline; padding-left: 10px; padding-right: 10px; } </style> </head> <body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn" > Log In </button> <div id="myDropdown" class="dropdown-content"> <form class="login-form"> <input type="text" placeholder="username"/> <input type="password" placeholder="password"/> <button class ="button">login</button> <div class = "center"> <p><a href="http://outsourceyourjobsearch.com/membership-account/membership-levels/" class="register">Register</a></p> <p><a href="http://outsourceyourjobsearch.com/wp-login.php?action=lostpassword" class="password">Forgot Password?</a></p> </div> </form> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </body> </html>
        </div>

您在<div>标记中有<!DOCTYPE html> <html> <head>，不应该有它。

我试过你的代码，它对我来说很好。