1

每次用户单击特定表单域时，我都尝试使用 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 下拉菜单，但它总是出现在同一位置，而不是我想要的表单字段旁边。

有任何想法吗？

谢谢

4

2 回答 2

1

尝试将相对位置应用于父元素并将绝对位置应用于子元素，则无需使用pos.left，pos.top也许 0,0 就可以了。

于 2010-03-19T12:35:34.940 回答
1

你考虑过一个时间选择器插件吗？我敢肯定还有更多，但重新发明已经存在的东西是一种耻辱

于 2010-03-19T12:38:26.187 回答