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>

通过JavaScript / jQuery切换div的可见性

5 个答案: