javascript - 下拉列表移动其他元素
问题描述
在这里,我有一个完全使用 vanilla JavaScript 制作的下拉菜单。但是当我点击下拉按钮时,它会移动其他元素。
let dropdownBtn = document.querySelector("button.dropdown-btn");
let itemListWrapper = document.querySelector("div.item-list-wrapper");
dropdownBtn.addEventListener("click", () => {
if (itemListWrapper.style.display === "none") {
itemListWrapper.style.display = "block";
} else {
if (itemListWrapper.style.display === "block" || itemListWrapper.style.display === "") {
itemListWrapper.style.display = "none";
}
}
});
function continuouslyClickDropdownBtn() {
dropdownBtn.click();
setTimeout(() => {
continuouslyClickDropdownBtn();
}, 750);
}
continuouslyClickDropdownBtn();
.container {
background-color: lightblue;
height: 200px;
padding: 0 2em;
}
.dropdown-wrapper {
width: fit-content;
background-color: hsla(0, 0%, 95%, 0.9);
padding: 0.3em;
border-radius: 0.3em;
position: relative;
}
.dropdown-btn {
border-radius: 0.3em;
width: 100%;
height: 1.75em;
font-size: 1.25em;
cursor: pointer;
}
.item-list-wrapper {
margin-top: 0.5em;
}
.dropdown-item-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.1em
}
.dropdown-item {
font-size: 1em;
width: 100%;
padding: 0.2em 0;
display: flex;
flex-direction: row;
cursor: pointer;
}
.dropdown-item:hover {
background-color: hsla(0, 0%, 80%, 1);
font-weight: bold;
}
.dropdown-item span {
flex-grow: 1;
padding: 0 1empx;
}
<div class="container">
<p>upper text</p>
<div class="dropdown-wrapper">
<button class="dropdown-btn">Media Quality</button>
<div class="item-list-wrapper">
<ul class="dropdown-item-list">
<li class="dropdown-item">
<span>360p</span>
</li>
<li class="dropdown-item">
<span>720p</span>
</li>
<li class="dropdown-item">
<span>1080p</span>
</li>
</ul>
</div>
</div>
<p>bottom text</p>
</div>
我尝试添加这个 CSS:
.item-list-wrapper {
margin-top: 0.5em;
position: absolute;
}
但随后它会从所有项目中删除背景颜色。即使将 say 添加background-color: hsla(0, 0%, 95%, 0.9);
到类中,它也只会将其添加到项目的宽度中。一旦打开,我无法让背景颜色环绕整个下拉菜单。
如何解决这个问题?
解决方案
一种方法是拥有一个inner-wrapper
并将其设置为position:fixed
您必须设置的高度,dropdown-wrapper
以便该元素在页面上仍然具有块存在
let dropdownBtn = document.querySelector("button.dropdown-btn");
let itemListWrapper = document.querySelector("div.item-list-wrapper");
dropdownBtn.addEventListener("click", () => {
if (itemListWrapper.style.display === "none") {
itemListWrapper.style.display = "block";
} else {
if (itemListWrapper.style.display === "block" || itemListWrapper.style.display === "") {
itemListWrapper.style.display = "none";
}
}
});
function continuouslyClickDropdownBtn() {
dropdownBtn.click();
setTimeout(() => {
continuouslyClickDropdownBtn();
}, 750);
}
continuouslyClickDropdownBtn();
.container {
background-color: lightblue;
height: 200px;
padding: 0 2em;
}
.dropdown-wrapper {
position: relative;
height: 40px;
}
.inner-wrapper {
position: fixed;
width: fit-content;
background-color: hsla(0, 0%, 95%, 0.9);
padding: 0.3em;
border-radius: 0.3em;
}
.dropdown-btn {
border-radius: 0.3em;
width: 100%;
height: 1.75em;
font-size: 1.25em;
cursor: pointer;
}
.item-list-wrapper {
margin-top: 0.5em;
}
.dropdown-item-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.1em
}
.dropdown-item {
font-size: 1em;
width: 100%;
padding: 0.2em 0;
display: flex;
flex-direction: row;
cursor: pointer;
}
.dropdown-item:hover {
background-color: hsla(0, 0%, 80%, 1);
font-weight: bold;
}
.dropdown-item span {
flex-grow: 1;
padding: 0 1empx;
}
<div class="container">
<p>upper text</p>
<div class="dropdown-wrapper">
<div class="inner-wrapper">
<button class="dropdown-btn">Media Quality</button>
<div class="item-list-wrapper">
<ul class="dropdown-item-list">
<li class="dropdown-item">
<span>360p</span>
</li>
<li class="dropdown-item">
<span>720p</span>
</li>
<li class="dropdown-item">
<span>1080p</span>
</li>
</ul>
</div>
</div>
</div>
<p>bottom text</p>
</div>
推荐阅读
- excel - 在行中查找一个单元格,然后使用该单元格引用在单元格引用范围内查找垂直单元格
- scilab - 比较scilab中的外语字符串
- python - Python 新手:“ModuleNotFoundError:没有名为 'django' 的模块”
- angular - Angular 6 - 动态子路由
- java - 二进制数据图像转换不等于同一图像的jpg
- amazon-web-services - 为什么删除所有 S3 资源后我仍然需要付费?
- c - 是否有某种命令可以在程序中创建延迟
- ios - swift:移动动画
- python - 用于 MAC 的 python 3.7 的 db.create_all() 问题
- python - 使用 Python 将 Web 浏览器数据添加到字符串