有没有办法让它像下拉菜单 这样，一旦我在输入或选择外部单击，下拉菜单（选择）就会消失，同时当我将焦点从输入转移到选择时，选择保持打开状态？
我希望这只能通过 css 来完成。 如果没有，什么可以在 ssr Blazor 上工作？ （我尝试做延迟+取消令牌，但效果不佳）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="multiselect">
<input placeholder="search..." type="search"></input>
<select multiple>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
</div>
<script>
window.onload = function () {
hide();
multisel.addEventListener("focus", focusin, true);
multisel.addEventListener("blur", fucusout, true);
// multisel.addEventListener("focusin", focusin);
// multisel.addEventListener("focusout", fucusout);
}
function focusin(event) {
show();
}
function fucusout(event) {
hide();
}
function hide() {
let el = document.querySelector('select');
el.style.display = 'none';
}
function show() {
let el = document.querySelector('select');
el.style.display = 'block';
}
</script>
<style>
body {
font-size: 20px !important;
}
.multiselect {
width: 400px;
}
select {
width: 100%;
font-size: 20px;
}
input {
width: 100%;
font-size: 20px;
}
</style>
</body>
</html>
更新：使用js也是可以接受的...任何解决方案...谢谢！
使用
CSS:hover在下面的例子中，我在 search 和
selectblur事件的事件侦听器。当搜索框失去焦点时，它会检查活动元素是否不是选择框，如果是则隐藏。我们对选择框做同样的事情，如果它失去焦点并且活动元素不是搜索框，它就会隐藏。
我已经使它变得非常简单，并且带有内联脚本/样式，所以您可能需要将其中一些更改为您想要的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div id="multiselect" class="multiselect">
<input id="search" placeholder="search..." type="search">
<select id="select" multiple class="hide">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
</div>
<script>
const search = document.getElementById('search');
const select = document.getElementById('select');
search.addEventListener('focus', () => {
select.classList.remove('hide');
});
search.addEventListener('blur', (event) => {
if (document.activeElement !== select) {
select.classList.add('hide');
}
});
select.addEventListener('blur', () => {
if (document.activeElement !== search) {
select.classList.add('hide');
}
});
</script>
</body>
</html>