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

你考虑过time picker plugin我确信还有更多，但是重新发明已经存在的东西会感到羞耻

Jquery：显示相对于另一个的元素

2 个答案: