Onclick或eventListener（'click'）并未按预期方式调用该函数

Question

我正在为我的页面创建一个登录表单，该表单将有两个选项“登录”和“注册”。与迷你标签和iframe窗口类似的概念。基本上，并排有一个用于“登录”的div和一个用于“注册”的div。当您单击“登录”时，当您单击“登录”（登录是DIV而非提交按钮）时，我希望将div（当前设置为height: 0和overflow: hidden）设置为“展开”（height: auto; overflow: visible）。标签）。

我不明白为什么它不调用该功能。在进行故障排除期间，我用页面中的另一个功能替换了该功能，该功能我知道它可以100％工作，但是仍然没有任何反应。

我包括了我尝试过的所有代码，我没有在HTML标记中同时使用onClick和addEventListener('click')。我只包括了两者，因此代码可用。同样，在Javascript中，我没有同时添加类和设置高度。我独立尝试过。

我的首选方法是使用eventlistener并添加类（这应该使过渡效果起作用）。

HTML：

         <div id="login-box">
         <span class="login-head">
           <h5 align="center" class="head">Login</h5><hr />
         </span>
         <ul class="drop-down">
         <li>

         <!-- LOGIN and SIGNUP tabs -->
          <div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
          <div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>

          <!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
          <div id="login-content">
              <div class="input column" id="first-name">
                  <input placeholder="First Name" type="text" class="validate white">
                  <div id="first-name-tooltip" class="tooltip">First Name</div>
              </div>
CSS：

/* default state with 0 height, ideally with a .5s transition 0 height to auto */
#login-content, #signup-content {
  height: 0;
  transition: height .5s;
  -moz-transition: height .5s;
  -webkit-transition: height .5s;
  -o-transition: height .5s;
  overflow: hidden;
}

/* class to be added to div */
.expand {
  height: auto;
  overflow: visible;
}

/* link-like features to div */
.drop-down-head:hover {
  background: #8fffad;
  cursor: pointer;
}
Javascript：

document.addEventListener('DOMContentLoaded',function() {

  document.getElementById('login-title').addEventListener('click',loginExpand);
});

function loginExpand() {
  document.getElementById('login-content').style.height=500; //tried this
  document.getElementById('login-content').classList.add('expand'); //also tried this (separately, not together)
}

我正在为我的页面创建一个登录表单，该表单将有两个选项“登录”和“注册”。与迷你标签和iframe窗口类似的概念。基本上，有一个用于“登录”的div和一个用于“注册”侧的div ...

Answer 1

[尝试一下，我使用display比使用overflow：