Показать и оставить div видимым, пока действие находится внутри div или поля ввода?

Question

Я хочу показать div под полем ввода, когда пользователь щелкает / фокусирует поле ввода, и скрывать div, когда фокус отсутствует, или пользователь щелкает за пределами поля ввода или ввода. В этом примере скрипты, когда я нажимаю на ввод, отображается div, а когда я щелкаю за пределами поля ввода, он скрывается.

Но я хочу, чтобы 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.

URL-адрес Fiddle

Answer 1

убедитесь, что тег body содержит ваше приложение и имеет полную ширину и высоту окна. Добавьте прослушиватель событий en, чтобы увидеть, находится ли событие click за пределами параметров div, а не поля ввода. скрыть параметры div, если это так.

JsFiddle

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();
    });
});

Answer 2

Вы можете попробовать использовать 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>