如何正确定制ul-li标签创建的下拉菜单？ [英] How to correctly customize the drop-down menu created by ul-li tags?

问题描述

我创建了一个使用标记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;
}

推荐答案

更改您的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;
}

并在您使用时将其转换为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');
});

让我知道这是否有效！我不明白你在说什么可伸缩性问题。*再详细一点。

这篇关于如何正确定制ul-li标签创建的下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！