Блог

Главная - Вопросы по программированию - Функция Js показать/скрыть -> скрыть/показать

Функция Js показать/скрыть -> скрыть/показать

#javascript #html #jquery #css

Вопрос:

Я пытаюсь создать простую всплывающую форму onClick, но я не хочу, чтобы она отображалась, а затем скрывалась, я хочу скрыть- > показать, что я использовал это: >https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show Я установил display: none;

Я попытался даже поменять местами операторы if, но ничего из этого не сработало:

         <script>
        function show() {
          var x = document.getElementById("box");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>
<button onclick="show()">Sign-in/Log-in</button> 
    <!-- Login Pop-up -->
    <form id="box" method="post">
        <input id="text" type="text" name="user_name"><br><br>
        <input id="text" type="password" name="password"><br><br>
                
        <input id="button" type="submit" value="Login"><br><br>
                
        <a>Don't have an account? Sign-up </a>
    </form>

Стили

 button {
    margin-left: 20px;
    padding: 9px 25px;
    color:white;
    background-color: #eb266e;
    border: none;
    border-radius: 50px;
    cursor: painter;
    transition: all 0.3s ease 0s;
}

button:hover {
    color: #eb266e;
    background-color: white;
    border: 1px solid #eb266e;
}
    
#box {
    border: solid 1px black;
    width: 200px ;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

Комментарии:

1. в #box стиле, добавьте display: none . Это сработает!

2. @NimittShah у меня есть, и в настоящее время, если вы видите на моем сайте, что он установлен на нет, но на самом деле он не работает, ничего не меняется

3. на вашем сайте я вижу, что он работает, но не в первый раз вижу это изображение . И вы можете исправить это, используя приведенный выше ответ

4. @Нимитшах И другие?

5. Извините, я имел в виду «ответ», который в #box стиле, добавьте display: none

Ответ №1:

Здесь полезен переключатель функций в списке классов элемента.

Просто создайте класс под названием, скажем, «скрыть», в котором не отображается значение «нет», установите флажок, чтобы этот класс изначально не отображался при загрузке.

Затем переключайте этот класс при каждом нажатии кнопки.

 function showunshow() {
  document.getElementById("box").classList.toggle('hide');
} 
 button {
  margin-left: 20px;
  padding: 9px 25px;
  color: white;
  background-color: #eb266e;
  border: none;
  border-radius: 50px;
  cursor: painter;
  transition: all 0.3s ease 0s;
}

button:hover {
  color: #eb266e;
  background-color: white;
  border: 1px solid #eb266e;
}

#box {
  border: solid 1px black;
  width: 200px;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.hide {
  display: none;
} 
 <button onclick="showunshow()">Sign-in/Log-in</button>
<!-- Login Pop-up -->
<form id="box" method="post" class="hide">
  <input id="text" type="text" name="user_name"><br><br>
  <input id="text" type="password" name="password"><br><br>

  <input id="button" type="submit" value="Login"><br><br>

  <a>Don't have an account? Sign-up </a>
</form>

Ответ №2:

Не могли бы вы попробовать переодеться в двух местах:

 <script>
  function show() {
    var x = document.getElementById("box");
    if (x.style.display !== "block") { // here
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
</script> 
 #box {
    display: none;
    ...
}

Ответ №3:

Вы можете попробовать этот код …

  function show(status){
    var tergetId=$(status).attr("tergetId");
    $("#" tergetId "").toggle("active");
  };


button {
    margin-left: 20px;
    padding: 9px 25px;
    color:white;
    background-color: #eb266e;
    border: none;
    border-radius: 50px;
    cursor: painter;
    transition: all 0.3s ease 0s;
}

button:hover {
    color: #eb266e;
    background-color: white;
    border: 1px solid #eb266e;
}
    
#box {
    border: solid 1px black;
    width: 200px ;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display: none;
}

<button onclick="show(this)" tergetId="box">Sign-in/Log-in</button> 
    <!-- Login Pop-up -->
    <form id="box" method="post">
        <input id="text" type="text" name="user_name"><br><br>
        <input id="text" type="password" name="password"><br><br>
                
        <input id="button" type="submit" value="Login"><br><br>
                
        <a>Don't have an account? Sign-up </a>
    </form>
Метки: