Javascript 如何停止下拉菜单元素重叠？

我试图在鼠标点击时创建一个平滑的下拉菜单

这正是我想要的效果

然而，我正在寻找一种方法来防止下拉文本元素在上下重叠

JS

//切换项目
var toggleProjects=function（）{
//作用
var projectsList=document.getElementsByClassName（'projects'）；
//如果（项目列表[0].style.display==“无”）{
如果（！projectsList[0].classList.contains（'projectsClass'））{
//再现
对于（变量i=0；i

---

如果您能提供任何帮助，我们将不胜感激。感谢您抽出时间

处理您在评论中提到的

解析器错误：意外的令牌状态

，这可能与代码有关（令牌错误可能是由于ES6和您的浏览器引起的）。为了消除任何疑问，这里提供了一个以更友好（更干净）的浏览器编写的代码版本方式：

---

你在寻找“滑动”效果吗？是的，滑动过渡只是在文本元素滑动到位时没有重叠；因此，不要一个接一个地出现。有几种方法可以实现这一点。有些方法需要对当前标记进行比其他方法更多的更改（尤其取决于动画的样式）.这里有一个超级简单的例子（或概念）我将CSS转换与高度/溢出结合使用：您可以将类应用于实际菜单，并使用高度转换，而不是单个元素

示例：@Jack这正是我想要的，谢谢！非常感谢您的回答，但是出现了“文档未定义”错误。我如何修复此错误帽子？@glittergirl，我已经更新了我的答案！（

document.body

now）-我很好奇，你在使用哪个浏览器/测试？我在使用谷歌浏览器，它仍然出现同样的错误（它在html脚本标记中工作得非常好，这让我非常困惑）

//toggleProjects
var toggleProjects = function() {

  //function
  var projectsList = document.getElementsByClassName('projects');
  // if(projectsList[0].style.display=='none'){
  if (!projectsList[0].classList.contains('projectsClass')) {
    //reappear
    for (var i = 0; i < projectsList.length; i++) {
      // projectsList[i].style.display='';
      projectsList[i].classList.add('projectsClass');
    }

  } else {
    //disappear
    for (var i = 0; i < projectsList.length; i++) {
      // projectsList[i].style.display='none';
      projectsList[i].classList.remove('projectsClass');
    }

  }
};

//event listener for click
document.getElementById('toggleTitle')
           .addEventListener('click', toggleProjects);

// IIFE to avoid exposing global variables
(function () {
    // Our "static" variables
    // These won't change in our event handler:

    // Variable to store our toggle "state" - whether it's open or closed
    var state = 0;

    // Element which we expand/collapse
    var menu = document.querySelector('ul');
    var total = menu.children.length;

    // 1.2 is a relative unit (rem).
    // If font-size is modified, you'll need to tweak this value
    var expandedHeight = 1.2 * total;
    var collapsedHeight = 1.2;

    function toggleProjects () {
        menu.style.height = (state ? expandedHeight : collapsedHeight) + 'rem';

        // Flip the state variable between 1 and 0
        state ^= 1;
    }

    document.body.querySelector('#toggleTitle').addEventListener('click', toggleProjects);
}());