如何使用jQuery在<input>下直接放置html块<ul>？

问题描述

| 我有这个HTML：

<html>
    <body>
        <div id=\"pgContent\">
            <div id=\"studyOverlay\">
                <div id=\"studyContainer\">
                    <div id=\"studyTest\">
                        <div id=\"studyTestContainer\">
                            <input class=\"dropInput\">
                            <ul class=\"inputDrop\">
                            <!--some <li>s-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我想使用jQuery将ѭ1定位在<input>的正下方。该HTML仅显示一个input和ul，但是同一类可以有多个。我尝试了这个jQuery：

$(\'.dropInput\').live(\'click\',function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + \"px\";
var right = offset.left + width + \"px\";

$(this).next().show();

$(this).next().css( {
    \'position\': \'absolute\',\'right\': right,\'top\': top
});
});

但是它的位置非常奇怪。我的猜测是，偏移量和div太多了。有没有什么办法解决这一问题？或者，如果您知道CSS方式，那就更好了！

解决方法

我似乎只用CSS就能做到这一点： http://jsfiddle.net/maniator/AfJUG/ 示例CSS：

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

除非我对眼前的问题有误解，否则这似乎是可行的。更新： JS：

$(\'.dropInput\').focus(function(){
    $(this).next(\'.inputDrop\').slideDown();
}).blur(function(){
    $(this).next(\'.inputDrop\').slideUp();
});

CSS：

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

.inputDrop {
    display: none;
}

.dropInput {
    display: block;
}

小提琴：http://jsfiddle.net/maniator/AfJUG/6/ 基于以下注释的新提琴：http://jsfiddle.net/maniator/AfJUG/7/ 还有一个：http://jsfiddle.net/maniator/AfJUG/9/ , 看起来像这样（JSFiddle）：

.dropInput{}
.inputDrop{display:block;}

<script src=\"//ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js\"></script>
<div id=\"pgContent\">
  <div id=\"studyOverlay\">
    <div id=\"studyContainer\">
      <div id=\"studyTest\">
        <div id=\"studyTestContainer\">
          <input class=\"dropInput\">
          <ul class=\"inputDrop\">
            <!--some <li>s-->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

html input ul 使用使用使用放置直接

如何使用jQuery在<input>下直接放置html块<ul>？

问题描述

解决方法

相关问答