当操作在div或输入字段中时，是否显示并保持div可见

Question

当用户点击/聚焦输入字段时，我想在输入字段下显示一个div，当焦点不在或用户点击div或输入字段外时隐藏该div。在这个fiddle示例中，当我单击input时，会显示一个div，当我在input字段外单击时，它会被隐藏。

但我想在以下条件下保持div可见：

1. When input is focused/clicked.
2. When click is within the div(.options).

div应在以下情况下隐藏：

1. Input is unfocused and click in not within div.
2. Click outside div.

Fiddle URL

Answer 1

您可以按照以下方式尝试使用relatedTarget：

$(function () {
var inputField = $('#input_field');
var optionsResult = $('#options');
inputField.focusin(function (e) {
e.preventDefault();
optionsResult.show();
}).focusout(function (e) {
if(e.relatedTarget){
if(e.relatedTarget.tagName != 'A')
optionsResult.hide();
}
else{
optionsResult.hide();
}
});
});
$(document).on('click', function(e){
if(e.target.tagName == 'HTML'){
$('#options').hide();
}
});

.options{
display:none;
position: absolute;
float: left;
width: 300px;
height: 200px;
background: #eee;
}
a{
display:block;
float: left;
width: 100%;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="app">
<div class="header">
<div id="main_container" class="box">
<div class="inputs">
<input id="input_field" type="text" placeholder="Demo account"/>
</div>
<div id="options" class="options">
<a href="#">Common Link</a>
<a href="#">Common Link 2 </a>
</div>
</div>
</div>
<div class="Data">
Another Data Set
</div>
</div>

Answer 2

确保body标签包含您的应用程序，并且是窗口的全宽和全高。添加en事件监听器，查看click事件是否在选项div之外，而不是输入字段之外。如果是这种情况，请隐藏选项div。

Js报价

body {
height: 100vh;
width: 100%;
}

$(function () {
var inputField = $('#input_field');
var optionsResult = $('#options');
var options = document.querySelector('#options');
// Listen for click events on body
document.body.addEventListener('click', function (event) {
// hide options if click is outside of options div and not the input element
if (!options.contains(event.target) && event.target.id !== 'input_field') {
optionsResult.hide();
}
});
inputField.focusin(function (e) {
e.preventDefault();
optionsResult.show();
});
});