Question

我正在尝试使用具有以下功能的纯javascript触发下拉列表：

点击下拉列表中的任意内容将关闭下拉列表
可以切换下拉列表。
单击下拉列表中的链接时，可以控制菜单应该关闭还是保持打开状态

现在我有一个问题。如果我尝试完成1（上面）我无法完成2（切换下拉列表），反之亦然。

关于3（上图），小提琴将清楚地向您显示，当点击第一个下拉列表中的链接时，下拉列表不会消失。但是，当从第二个下拉列表中单击链接时，下拉列表会消失。我该如何控制它？

小提琴：https://jsfiddle.net/TheEarlyMan/0u6nnakm/

我的JS：

    class dropdown {

  constructor() {
    this.trigger = document.querySelectorAll('.dropdown [data-trigger]');
    this.target = document.querySelectorAll('.dropdown [data-dropdown]'); 
    this.init();
  }

  init() {
    for (let i = 0; i < this.trigger.length; i++) {
      this.handleClick(this.trigger[i]);
    }
  }

  handleClick(el) {
    el.addEventListener('click', (event) => {
      event.preventDefault();
      el.nextElementSibling.classList.toggle('active');
    });
    for (let i = 0; i < this.target.length; i++) {
      this.handleClose(this.target[i]);
    }
  }

  handleClose(el) {
    window.addEventListener('mouseup', (event) => {
      if (event.target != el && event.target.parentNode != el) {
        if (el.classList.contains('active')) {
          el.classList.remove('active');
        }
      }
    });
  }

}

window.addEventListener('load', () => {
  new dropdown();
}, false)

CSS：

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  display: none;
  z-index: 1;

  min-width: 10vr;
  padding: 0;
  lost-column: 1/3;
  padding: calc(1vr - 1px);
  background: #fff;
  border: 1px solid #ccc;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background: #fff;
  border: 1px solid #ccc;
  width: 8vr;
  li {
    margin: 0;
    display: block;
  }
  a {
    padding: 0.5vr 0.5vr;
    &:hover {
      background: #eee;
    }
  }
}

.dropdown-menu, .dropdown-content {
  &.active {
    display: block;
  }
}

通过切换下拉纯Javascript ES6问题

0 个答案: