如何解决如何使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。