Estoy tratando de hacerlo para que cuando haga clic en un botón, aparezca una "pantalla de inicio de sesión" superpuesta. pero mi código no funciona en absoluto. Aquí está el 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>

No tengo mucha experiencia con JavaScript y jQuery, pero he creado scripts que muestran / ocultan contenido antes, simplemente no he creado uno que cambie la visibilidad, por lo que supongo que hay un problema en algún lugar allí. Agradecería mucho la ayuda!

-1
Devon Becker 31 oct. 2017 a las 13:12

5 respuestas

La mejor respuesta

Cambia tu código a

 $(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";
        }
      });
    });

El código se ejecuta dentro de la devolución de llamada .click, por lo que el condicional debería vivir allí. Podría limpiar el código más, pero para su comprensión, esto debería funcionar :).

3
Noel Kriegler 31 oct. 2017 a las 10:16

Puede cambiarlo y hacerlo mucho más fácil con 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>
2
SilverSurfer 31 oct. 2017 a las 11:38

En lugar de cambiar el estilo en línea, cree la clase .hidden y alterne.

$('#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>
0
Frank Etoundi 31 oct. 2017 a las 12:08

Cuidado porque hay algunos errores en el código:

Con

isOpen != isOpen;

No está asignando un valor, es solo una condición. Es posible que desee hacer esto:

isOpen = !isOpen;

Además, ya que su cheque se hace dentro

$(document).ready(function() {

Esto solo se evalúa una vez, después de que se carga la página. Debe poner su cheque dentro de una función y luego llamarlo cuando sea necesario, por ejemplo:

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

Y luego llámalo al hacer clic

$("#login-button").click(function() {
    isOpen != isOpen;
    checkOpen();
});
2
Luca De Nardi 31 oct. 2017 a las 10:16

¡Esta es una forma de lograr lo que quieres sin 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>
0
3Dos 31 oct. 2017 a las 10:19