Javascript Onclick或eventListener（'；click'；）是'；t按预期调用函数

我正在为我的页面设计一个登录表单，它有两个选项“登录”和“注册”。与迷你选项卡和iframe窗口的概念类似。基本上有一个用于“登录”的div和一个用于“注册”的div。当您单击“登录”时，我想要一个div（当前设置为

height:0

和

overflow:hidden

）在您单击“登录”时“展开”（

height:auto；overflow:visible

）（登录是一个div而不是提交按钮，它就像一个选项卡）

我不明白它为什么不调用这个函数。在我的故障排除过程中，我将该函数替换为我页面中的另一个函数，我知道该函数100%正常工作，但仍然没有发生任何事情

我包含了我尝试过的所有代码，我没有在HTML标记中使用

onClick

，而同时使用

addEventListener（'click'）

。我只是把两者都包括在内，这样代码就可以使用了。同样，在Javascript中，我没有同时添加类和设置高度。我独立地试过了

我的首选方法是使用eventlistener和add类（这应该允许转换效果工作）

HTML:

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)
}

---

试试这个，我使用的是

显示

，而不是使用

溢出

：

document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'login-title'）。addEventListener（'click'，loginExpand）；
});
函数loginExpand（）{
document.getElementById（'login-content'）.style.display='block'；
}

#登录内容，
#注册内容{
身高：0；
过渡：高度5s；
-moz过渡：高度0.5s；
-webkit过渡：高度0.5s；
-o型过渡：高度5s；
}
/*要添加到div的类*/
.扩大{
高度：自动；
溢出：可见；
}
/*将类似功能链接到div*/
.下拉头部：悬停{
背景：#8fffad；
光标：指针；
}

登录



登录
报名
名字
您对
CSS
有问题。您正在分配
溢出：可见id
选择器的code>属性，该选择器的优先级高于
类

.expand
类永远不会覆盖此属性，因此
溢出
属性将始终保持
隐藏
。你可以使用
！重要信息
，强制浏览器使用css属性

您可以通过使用
javascript
添加
visible
属性来处理此问题。
或者使用
类
选择器应用css

Javascript示例：


document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'login-title'）。addEventListener（'click'，loginExpand）；
});
函数loginExpand（）{
控制台日志（“单击”）；
让elem=document.getElementById（'login-content'）；
elem.style.height=500；//已尝试此操作
elem.style.overflow='可见'；
elem.classList.add（'expand'）；//也尝试过（单独，而不是一起）
}
/*默认状态为0高度，理想情况下为0高度到自动的.5s转换*/
#登录内容，
#注册内容{
身高：0；
过渡：高度5s；
-moz过渡：高度0.5s；
-webkit过渡：高度0.5s；
-o型过渡：高度5s；
溢出：隐藏；
}
/*要添加到div的类*/
.扩大{
高度：自动；
溢出：可见；
}
/*将类似功能链接到div*/
.下拉头部：悬停{
背景：#8fffad；
光标：指针；
}

登录



登录
报名
名字


我刚刚添加了
！重要信息
至
。在CSS中展开
，其工作正常


document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'login-title'）。addEventListener（'click'，loginExpand）；
});
函数loginExpand（）{
document.getElementById（'login-content'）.classList.add（'expand'）；
}
/*默认状态为0高度，理想情况下为0高度到自动的.5s转换*/
#登录内容，
#注册内容{
身高：0；
过渡：高度5s；
-moz过渡：高度0.5s；
-webkit过渡：高度0.5s；
-o型过渡：高度5s；
溢出：隐藏；
}
/*要添加到div的类*/
.扩大{
高度：自动！重要；
溢出：可见！重要；
}
/*将类似功能链接到div*/
.下拉头部：悬停{
背景：#8fffad；
光标：指针；
}

登录



登录
报名
名字
您是否可以使用或在此处创建一个用于显示问题发生的视图。只需使用
！重要信息
在
中展开
在CSS.Hi中，@Manjuboyz添加了一个响应，其中包含一个非常有用的代码片段：很高兴它成功了！正如在评论中所说的，你可以使用
fadeIn（）
和
fadeOut（）
来获得过渡效果。这确实有效。有没有一种方法可以使用此方法添加过渡效果，使div“向下滑动”？可以，有一个选项
fadeIn（）
和
fadeOut（）
，这对过渡非常有帮助，实现起来非常简单，这是url，非常感谢。Javascript对我来说是一门相当新的语言，但我正在学习！这是实际页面，如果你想看的话。我没有做“注册”部分，只是登录。（按钮已被禁用）好的，我无法打开链接可能是因为我正在使用ofc机器。我意识到我用的是ID而不是类，我确实把它改成了类选择器，我
/* 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;
}

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)
}