通過JavaScript / jQuery切換div的可見性

Question

我試圖做到這一點，所以當我單擊按鈕時，將顯示一個覆蓋的“登錄屏幕”。 但是我的代碼根本不起作用。 這是HTML：

 $(document).ready(function() { var isOpen = new Boolean(false); if (isOpen == true) { document.getElementById("login-float").style.display = "block"; } else { document.getElementById("login-float").style.display = "none"; } $("#login-button").click(function() { isOpen != isOpen; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="topnav" id="myTopnav"> <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> <!--deleted other menu items as they are not important to the issue--> </ul> <div id="login-float" style="display: none;"> <form id="login-mini" action="login-check.php" method="post"> <fieldset> <center> <h2>Client Login Area</h2> </center> <br> <input class="text-input" type="text" name="username" id="username" placeholder="username"> <br> <input class="text-input" type="password" name="password" id="password" placeholder="password"> <br> <input class="submit" type="submit" value="Login"> <br> <center> <a href="/contact.php">I can't access my account.</a> </center> </fieldset> </form> </div> 

我沒有使用JavaScript和jQuery的豐富經驗，但是我之前制作過顯示/隱藏內容的腳本，只是還沒有制作能切換可見性的腳本，因此我假設其中存在一個問題。 我將非常感謝您的幫助！

Answer 1

將您的代碼更改為

 $(document).ready(function() {
      var isOpen = false;         
      $("#login-button").click(function() {
        isOpen = !isOpen;
        if (isOpen) {
          document.getElementById("login-float").style.display = "block";
        } else {
          document.getElementById("login-float").style.display = "none";
        }
      });
    });

該代碼在.click回調內執行，因此條件代碼應位於該代碼中。 您可以清理更多代碼，但為了您的理解，這應該可以進行:)。

Answer 2

注意，因為代碼中存在一些錯誤：

用

isOpen != isOpen;

您沒有分配值，這只是一個條件。 您可能要這樣做：

isOpen = !isOpen;

此外，由於您的支票是在內部進行的

$(document).ready(function() {

在頁面加載后，這只會被評估一次。 您必須將檢查放入函數中，然后在需要時調用它，例如：

function checkOpen(){
    if (isOpen == true) {
        ...
    }else{
        ...
    }

然后點擊

$("#login-button").click(function() {
    isOpen != isOpen;
    checkOpen();
});

Answer 3

您可以使用toggle（）對其進行更改並使它變得更加容易

 $(document).ready(function() { $("#login-button").click(function() { $("#login-float").toggle() }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="topnav" id="myTopnav"> <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> <!--deleted other menu items as they are not important to the issue--> </ul> <div id="login-float" style="display: none;"> <form id="login-mini" action="login-check.php" method="post"> <fieldset> <center> <h2>Client Login Area</h2> </center> <br> <input class="text-input" type="text" name="username" id="username" placeholder="username"> <br> <input class="text-input" type="password" name="password" id="password" placeholder="password"> <br> <input class="submit" type="submit" value="Login"> <br> <center> <a href="/contact.php">I can't access my account.</a> </center> </fieldset> </form> </div> 

Answer 4

這是無需jQuery即可實現的目標！

 var isOpen = false; function toggleLogin () { if (isOpen === true) { document.getElementById("login-float").style.display = "block"; } else { document.getElementById("login-float").style.display = "none"; } } document.getElementById("login-button").addEventListener('click', function () { isOpen = !isOpen; toggleLogin(); }); 

 <ul class="topnav" id="myTopnav"> <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> <!--deleted other menu items as they are not important to the issue--> </ul> <div id="login-float" style="display: none;"> <form id="login-mini" action="login-check.php" method="post"> <fieldset> <center> <h2>Client Login Area</h2> </center> <br> <input class="text-input" type="text" name="username" id="username" placeholder="username"> <br> <input class="text-input" type="password" name="password" id="password" placeholder="password"> <br> <input class="submit" type="submit" value="Login"> <br> <center> <a href="/contact.php">I can't access my account.</a> </center> </fieldset> </form> </div> 

Answer 5

無需更改內聯樣式，而是創建.hidden類並進行切換。

 $('#login-button').click(function() { var loginFloat = $('#login-float'); if (loginFloat.hasClass('hidden')) { loginFloat.removeClass('hidden'); } else { loginFloat.addClass('hidden'); } }) 

 body { text-align: center; margin-top: 2em; } .hidden { display: none; } #login-button { background: #3bb2c1; text-decoration: none; } #login-float { background: #51b7b7; margin: 2em; padding: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="topnav" id="myTopnav"> <li><a href="#" id="login-button">CLIENT AREA</a></li> </ul> <div id="login-float" class="hidden"> <form id="login-mini" action="login-check.php" method="post"> <fieldset> <center> <h2>Client Login Area</h2> </center> <br> <input class="text-input" type="text" name="username" id="username" placeholder="username"> <br> <input class="text-input" type="password" name="password" id="password" placeholder="password"> <br> <input class="submit" type="submit" value="Login"> <br><br> <center> <a href="/contact.php">I can't access my account.</a> </center> </fieldset> </form> </div>