如何阻止下拉菜单元素重叠?

Question

我正在尝试在鼠标单击时创建一个流畅的下拉菜单

这就是我正在寻找的确切效果 https://jsfiddle.net/j2fygbzb/13/

但是，我正在寻找一种方法来防止下拉文本元素在上下拉过程中相互重叠

.JS

//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);

任何帮助将不胜感激，感谢您的时间

Answer 1

关于您在评论中提到的Parser error: Unexpected token state，这可能与代码有关(令牌错误可能是由于 ES6 和您的浏览器造成的(。为了消除任何疑问，这里有一个以更浏览器友好(和更干净(的方式编写的代码版本：

// 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);
}());

https://jsfiddle.net/rxLf8t3h/