如何正确自定义 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 我不明白你在说什么缩放问题。 *再详细说明一下。