CSS在另一个元素处于活动状态时显示元素

我正试图创建一个网站，该网站仅在文本输入为活动/聚焦时显示列表(ol(

我的代码如下所示：

<form>
<div>
<div>
<div>
<div> some text </div>
<div>
<label>title</label>
<input>text input....</input>
<div>some text</div>
</div>
<div>some text</div>
</div>
<ol class="list">
...Elements
</ol>
</div>
</div>
</form>

删除div或将列表放在与输入相同的div中是不可能的——我已经尝试过了，这会破坏布局

我已经试过几种方法了。

css+运算符，所以input+列表不起作用，因为这两个元素没有相同的父

我也尝试过：有，由于浏览器支持不好，它不起作用

在div:hover中显示列表是可行的，但只要移动光标，列表就会消失。只要输入是活动的/聚焦的，它就必须是可见的

这对css来说可能吗？或者我需要一些JavaScript/jQuery的东西吗？

普通javascript也可以，您可以在ol和input中添加id。

let input = document.querySelector('#test');
let list = document.querySelector('#list');
input.addEventListener('focus', (e) => {
toggleList();
})
input.addEventListener('blur', (e) => {
toggleList();
})
function toggleList() {
list.classList.toggle('list')
}

.list {
display: none;
}

<form>
<div>
<div>
<div>
<div> some text </div>
<div>
<label>title</label>
<input id="test" />
<div>some text</div>
</div>
<div>some text</div>
</div>
<ol id="list" class="list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</div>
</div>
</form>

这适用于id和单个二人组input/ol。如果您需要重复输入/ols几次，请在您的问题中澄清：(

信息：

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

这将起作用：

$('input').focus(function(){
$('.list').show();
}).focusout(function(){
$('.list').hide();
});

.list{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<div>
<div>
<div>
<div> some text </div>
<div>
<label>title</label>
<input>text input....</input>
<div>some text</div>
</div>
<div>some text</div>
</div>
<ol class="list">
...Elements
</ol>
</div>
</div>
</form>

它可以用纯CSS完成，但您需要用列表或输入进行一些定位技巧。这里有一个建议，告诉你我的意思：

<form>
<div>
<div class="component">
<div>
<div> some text </div>
<div>
<label for="input">title</label>
<div>some text</div>
</div>
<div>some text</div>
</div>
<input class="input" id="input" />
<ol class="list">
<li>Element 1</li>
<li>Element 2</li>
</ol>
</div>
</div>
</form>

.component {
position: relative;
}
.input {
position: absolute;
top: 18px;
left: 35px;
}
.list {
display: none;
}
.input:focus + .list {
display: block;
}

我想这就是您想要的。(我使用的是jquery，记得导入head标记中的cdn(

@nejc26建议我的建议实际上是错误的：他只是改变了列表的不透明度，但如果列表中有链接呢？它们将是可点击的。事实上，css opacity属性只是更改元素的可见性，但为用户提供了与元素交互的可能性。点击此处阅读更多

$(document).ready(function(){
$(".input").focus(function(){
$(".list").css("display","block")
});
$(".input").focusout(function(){
$(".list").css("display","none")
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input">
<ol class="list" style="display: none">
<li>Carl</li>
<li>Peter</li>
<li>John</li>
<li>...</li>
</ol>

(要显示结果，请单击上面的"运行代码片段"按钮(
应用于您的答案的这类似于

$(document).ready(function(){
$(".input").focus(function(){
$(".list").css("display","block")
});
$(".input").focusout(function(){
$(".list").css("display","none")
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div>
<div>
<div> some text </div>
<div>
<label>title</label>
<input class="input">text input....</input>
<div>some text</div>
</div>
<div>some text</div>
</div>
<ol class="list" style="display: none">
...Elements
</ol>
</div>
</div>
</form>

类似的东西？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
</head>
<body>
<form>
<div>
<div>
<div>
<div> some text </div>
<div>
<label>title</label>
<input onfocus="Focus()">text input....</input>
<div>some text</div>
</div>
<div>some text</div>
</div>
<ol id="list" style="opacity: 0%;">
...Elements
</ol>
</div>
</div>
</form>
<script>
function Focus()
{
document.getElementById("list").style.opacity = "100%";
}
</script>
</body>
</html>

是的。我确实使用了一些JavaScript。祝你今天过得愉快！

相关内容

最新更新

热门标签：