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/

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

1 个答案: