Question

我目前正在处理一个简单的表单并试图让输入从高处向下滑动：0到高度：auto。这个想法是默认为某人的电子邮件，一旦点击“更改电子邮件”按钮，下拉为“新电子邮件”和“确认电子邮件”输入部分。

我已经包含了我的代码，以便更容易地显示我正在处理的内容。目前，点击“更改电子邮件”只显示表单，但我想让它向下滑动。同样，当表单显示并且用户单击“取消”时，表单将向上滑回高度：0。请忽略单击“取消”在代码段中不起作用，它目前在我的编辑器中工作，我'我正在寻找关于滑动备份的一些指导。

请提供仅使用JavaScript而非jQuery的回复。

请运行代码以查看它的外观！ “显示”部分以JavaScript中的if语句开头。

var changeBtnEmail = document.getElementsByClassName('change-item')[0];

changeBtnEmail.addEventListener('click', function() {

  var profContainer = this.parentElement;
  var changeContainer = profContainer.children[1];
  var currentInput = changeContainer.children[0];
  var changeForm = changeContainer.children[1];

  if (changeForm.style.height == 0) {
    Object.assign(changeForm.style, {
      height: 'auto',
      // overflow: 'hidden'
    });
    currentInput.style.display = 'none';
  }
});

var cancelEmail = document.getElementsByClassName('cancel')[0];
var cancelParent = cancelEmail.parentElement;

cancelEmail.addEventListener('click', function() {
  Object.assign(cancelParent.style, {
    height: '0',
    overflow: 'hidden'
  })
});

.wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  color: #666666;
  font-family: 'Oxygen', sans-serif;
}
button {
  outline: 0;
}
h1 {
  font-size: 2.65rem;
  margin-bottom: 50px;
}
/* Email, Name, Password Styling */

.profile-main-container {
  display: flex;
  flex-direction: column;
}
.prof-container {
  width: 100%;
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
}
.prof-container h3 {
  width: 20%;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}
.change-container {
  width: 60%;
}
.change-container p {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 300;
}
.change-form {
  top: 0;
  width: 100%;
  transition: height 0.5s linear;
  height: 0;
  overflow: hidden;
}
.change-form fieldset:first-of-type,
.change-form fieldset:nth-of-type(2) {
  position: relative;
  padding: 0;
  margin: 15px 0;
  border-width: 0.6px;
}
.change-form fieldset:first-of-type {
  margin-top: 0;
}
.change-form label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
}
.change-form input {
  margin: 0;
  padding: 15px;
  width: 100%;
  border: none;
  font-size: 1.45rem;
  font-weight: 300;
  color: #645564;
}
.change-form input:focus {
  outline: 0;
  border: 0.6px solid #2d9fee;
}
.change-form fieldset:last-of-type {
  padding: 0;
  border: none;
  text-align: right;
  font-size: 1.45rem;
}
.change-form fieldset:last-of-type button {
  width: 25%;
  padding: 7px;
  color: #666666;
  background: none;
  border: 0.6px solid #c0c0c0;
  transition: all 0.4s;
}
.change-form fieldset:last-of-type button:last-of-type {
  background: #91c789;
  border-color: #91c789;
}
.change-form fieldset:last-of-type button:first-of-type:hover,
.change-form fieldset:last-of-type button:first-of-type:focus {
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.change-form fieldset:last-of-type button:last-of-type:hover,
.change-form fieldset:last-of-type button:last-of-type:focus {
  background: #64895f;
  border-color: #64895f;
}
.change-form fieldset:last-of-type input {
  padding: 0;
  background: none;
  color: white;
}
.change-item {
  /* this is the change button */
  width: 20%;
  background: none;
  border: none;
  padding: 0;
  text-align: right;
  font-size: 1.45rem;
  color: #2d9fee;
  transition: border 0.4s;
}
.change-item:hover,
.change-item:focus {
  text-decoration: underline;
  cursor: pointer;
}
/* Account Type Styling */

.account-type {
  align-items: center;
}
.account-type .change-container {
  display: flex;
}
.account-type button {
  width: 50%;
  padding: 7px;
  font-size: 1.45rem;
  color: #666666;
  border: 0.6px solid #c0c0c0;
  background: none;
}
.account-type button:first-of-type {
  background: #91c789;
  border-color: #91c789;
  color: white;
}
.account-type button:first-of-type:hover,
.account-type button:first-of-type:focus {
  background: none;
  border-color: #c0c0c0;
  color: #666666;
}
.change-item.delete {
  text-align: left;
  margin-top: 20px;
}

<body>

  <div class="wrapper">

    <div class="profile-main-container">

      <div class="prof-container email">
        <h3>Email</h3>

        <div class="change-container">
          <p>first.last@email.com</p>

          <form class="change-form">
            <fieldset>
              <label for="new-email">New Email</label>
              <input type="email" id="new-email" placeholder="New Email" />
            </fieldset>

            <fieldset>
              <label for="confirm-email">Confirm Email</label>
              <input type="email" id="confirm-email" placeholder="Confirm Email" />
            </fieldset>

            <fieldset>
              <button class="cancel">Cancel</button>
              <button>
                <input type="submit" value="Submit" />
              </button>
            </fieldset>
          </form>
          <!-- End change-form -->
        </div>

        <button class="change-item">Change Email</button>

      </div>
      <!-- End prof-container email-->

    </div>
    <!-- End profile-main-container -->
  </div>
  <!-- End wrapper -->
</body>

表单输入向下滑动 - 高度：0到自动

0 个答案: