2

Почему при событии focusin установив div значений top и left методом offset(), DIV не становится на заданное место при смени фокуса, а суммируется старое значение с новым.

input {
  display: block;
  margin: 40px;
}
.description {
  height: 30px;
  overflow: scroll;
  display: none;
  position: absolute;
  background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div class="description">
  <table>
    <tr>
      <th>EXAMPLE</th>
      <th>DESCRIPTION</th>
    </tr>
    <tr>
      <th>1</th>
      <th>this 1</th>
    </tr>
    <tr>
      <th>2</th>
      <th>this 2</th>
    </tr>
  </table>
</div>
<script>
$(':text').focusin(function() {
    var a = $(this).offset().top + $(this).outerHeight(),
    b = $(this).offset().left;
    $('.description').offset({top: a, left: b}).fadeIn(400);
  });
  $(':text').focusout(function() {
    $('.description').css('display','none');
});
</script>

1

2 ответа 2

1

Добавь removeAttr или css.

$(':text').focusin(function() {
        var a = $(this).offset().top + $(this).outerHeight(),
        b = $(this).offset().left;
        $('.description').offset({top: a, left: b}).fadeIn(400);
    });
    $(':text').focusout(function() {
        $('.description').css('display','none');
   // $('.description').removeAttr('style');
   $('.description').css({'left' : '0', 'top':'0'});

    });
0

Еще рабочий вариант

$(':text').focusin(function() {
  var a = $(this).offset().top + $(this).outerHeight(),
  b = $(this).offset().left;

  $('.description').css({'top': a, 'left': b}).fadeIn(400);

});
  $(':text').focusout(function() {
  $('.description').css('display','none');
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.