Jquery: отображать элемент относительно другого

Question

Я пытаюсь отобразить выпадающий список, используя jquery каждый раз, когда пользователь нажимает на определенное поле формы ...

На данный момент HTML-код как стоит

// Form field to enter the time an event starts
<div>
  <label for="eventTime"> Event Time </label>
    <input type = "text" name="eventTime" id="eventTime" class="time">
  </label>
</div>

// Form field to enter the time an event finishes
<div>
  <label for="eventEnd"> Event Ends</label>
    <input type = "text" name="eventEnds" id="eventEnds" class="time">
  </label>
</div>

И Jquery выглядит так

    // Display Time Picker  
$('.time').click(function(){
    var thisTime = $(this);


        var timePicker = '<ul class="timePicker">'
            timePicker += '<li>10.00am</li>'
            timePicker += '<li>11.00am</li>'
            timePicker += '<li>12.00am</li>'
            timePicker += '</ul>'

    $('.timePicker').hide().insertAfter(thisTime);

      //show the menu directly over the placeholder
        var pos = thisTime.offset();

            $(".timePicker").attr({
              top: pos.top
              left: pos.left
            });
             $(".timePicker").show();
                });

Однако, когда я нажимаю на одно из полей формы с указанием времени класса, появляется раскрывающийся список timePicker, но он всегда появляется в том же месте, а не рядом с полем формы, как мне хотелось бы.

Есть идеи?

Спасибо

Answer 1

рассматривали ли вы плагин выбора времени Я уверен, что есть и другие, но стыдно изобретать что-то, что уже существует

Answer 2

попробуйте применить относительную позицию к родительскому элементу и абсолютную позицию к дочернему элементу, тогда нет необходимости использовать pos.left и pos.top, возможно, 0,0 - штраф