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 に答える