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

尝试将相对位置应用于父元素，将绝对位置应用于子元素，那么就不需要使用 pos.left 和 pos.top 可能 0,0 就可以了。

Answer 2

您是否考虑过时间选择器插件 我确信还有更多，但是重新发明已经存在的东西是一种耻辱