如何正确自定义ul-li标签创建的下拉菜单？

Question

我使用标签 ul 和 li 创建了一个下拉菜单。这可行，但我希望在打开菜单时，它不会像在屏幕上那样移动下方的块。所以，这是我的 css:

#select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

Answer 1

把你的css改得有点像

旧 CSS

#select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

新 CSS

#select-ul {
  z-index: 1;
  display: none;
  position: absolute;
  width: 100%; /* you can change but must give width */
  max-height: 300px;
  cursor: pointer;
  border: 1px solid #e5e5e5; /* 0.1px doesn't work */
  border-top: 0;
  padding: 12px;
  background-color: white;
  overflow: hidden scroll;
}

#select-ul.active {
  display: flex;
  flex-direction: column;
}

还有一点 JavaScript 在您使用时将其转换为 vue。

const dropdown = document.querySelector('#select-ul');

dropdown.addEventListener('click', () => {
  dropdown.classList.add('active'); // you can also use toggle
});

// additionally 
dropdown.addEventListener('blur', () => {
  dropdown.classList.remove('active');
});

让我知道这是否有效！ TBH 我不明白你在说什么扩展问题。 *再详细说明一下。

如何正确自定义ul-li标签创建的下拉菜单？

How to correctly customize the drop-down menu created by ul-li tags?

html

css

frontend

scss-mixins