Question

我正在尝试制作一个下拉菜单框。在这种情况下，我希望每当输入字段AND下拉框不再处于焦点时隐藏该框。

这是我的HTML代码：

<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>

<div id="another element">Pressing another element on the page should hide the suggestion box</div>

我尝试了以下内容：

$('[id=user_address][id=user_address_sg]').focusout(function (){
    $('#user_address_sg').hide();
});

当我在页面上选择另一个输入字段或其他元素时，为什么user_address_sg不会隐藏？

图片（第1名：当我写名字时，第2名：当我在建议出现时选择其他表格时）

第一张图片：应显示建议框并可点击

第二张图片：执行此操作时，建议框应消失

Answer 1

更新： CSS替代方案：

function suggest(key) {
document.getElementById('user_address').value = document.getElementById(key).innerHTML;  
 }

#user_address_sg {
  vertical-align: top;
  text-decoration: none;
  display: none;
  color:black;  
}

#user_address_sg:focus, #user_address_sg:active {
  display: inline-block;
  color:black;
}

#user_address:focus ~ #user_address_sg {
  display: inline-block;
}

<input type="text" id="user_address">
<a href=# id="user_address_sg">
<span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br>
<span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br>
<span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br>
<span id=a4 onClick="suggest('a4')">SUGGESTION 4</span>
</a>

Answer 2

您可能需要blur并用逗号分隔选择器，因为具有两个不同ID的单个元素不存在，但两个不同的元素具有不同的ID。所以将它们分开：

$('[id=user_address],[id=user_address_sg]').blur(function (){
    $('#user_address_sg').hide();
});

使用on()方法

更好

$('[id=user_address],[id=user_address_sg]').on('blur', function (){
    $('#user_address_sg').hide();
});

当焦点元素失去焦点时，

blur事件将触发。所以我认为这就是你需要的。

专注于输入表格和div

2 个答案: