gpt4 book ai didi

javascript - 如何在网页的所有其他元素之上制作一个 div

转载 作者:行者123 更新时间:2023-11-30 14:42:44 24 4
gpt4 key购买 nike

我从头开始制作了一个带有复选框的下拉列表,因为我正在处理的元素必须得到旧版本 IE 的支持。结果还不错,除了一部分。当我单击下拉列表时,页面的所有其他元素都会降低。

我试图实现的行为与元素选择相同,它将位于页面的任何其他元素之上。是否有 CSS 属性(或纯 JS)可以让我这样做。

代码如下:

var checkList = document.getElementById('list1');
var items = document.getElementById('items');
document.getElementById('anchor').onclick = function(evt) {
if (items.className.indexOf("visible") !== -1) {
items.className = "";
items.style.display = "none";
} else {
items.className = " visible";
items.style.display = "block";
}


}
.dropdown-check-list {
display: inline-block;
}

.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}

.dropdown-check-list ul {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}

.dropdown-check-list ul li {
list-style: none;
}
<body>
<div id="list1" class="dropdown-check-list" tabindex="100">
<span id="anchor" class="anchor">Type</span>
<ul id="items" class="items">
<li><input type="checkbox" />Choice 3</li>
<li><input type="checkbox" />Choice 2</li>
<li><input type="checkbox" />Choice 1</li>
</ul>
</div>
<h1>
this shou
</h1>
</body>

最佳答案

对 list 使用position:absolute...它将从文档流中删除该元素,不会影响其他元素...

也对父容器使用position:relative .dropdown-check-list

var checkList = document.getElementById('list1');
var items = document.getElementById('items');
document.getElementById('anchor').onclick = function(evt) {
if (items.className.indexOf("visible") !== -1) {
items.className = "";
items.style.display = "none";
} else {
items.className = " visible";
items.style.display = "block";
}


}
.dropdown-check-list {
display: inline-block;
position: relative;
}

.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}

.dropdown-check-list ul {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
position: absolute;
left: 0;
right: 0;
background: #fff;
top: 100%;
}

.dropdown-check-list ul li {
list-style: none;
}
<body>
<div id="list1" class="dropdown-check-list" tabindex="100">
<span id="anchor" class="anchor">Type</span>
<ul id="items" class="items">
<li><input type="checkbox" />Choice 3</li>
<li><input type="checkbox" />Choice 2</li>
<li><input type="checkbox" />Choice 1</li>
</ul>
</div>
<h1>
this shou
</h1>
</body>

关于javascript - 如何在网页的所有其他元素之上制作一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49413037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com