var timeoutId;
$(function ()
{
$("#menu li")each(function (index)
{
$(this)mouseover(function ()
{
timeoutId = setTimeout(function ()
{
//将所有样式为contentShow的移除
$("divcontentShow")removeClass("contentShow");
//将当前的显示
$("divcontent:eq(" + index + ")")addClass("contentShow")css("margin-left", (index + 05) 100 + "px");
}, 300);
})mouseout(function ()
{
clearTimeout(timeoutId);
});
});
});
</script>
<style type="text/css">
divcontent{clear:left;display:none;}
divcontentShow{display:block;}
a{text-decoration:none;color:Black;}
A:link {COLOR: #00135b; text-decoration: none;}
A:active {COLOR: #00135b; text-decoration: none;}
A:visited {COLOR: #00135b; text-decoration: none;}
A:hover {COLOR: #ff8a00; text-decoration: none;}
</style>
<div>
<ul id="menu" style="list-style:none;">
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"> 一</li>
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;">二</li>
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;">三</li>
</ul>
<div style="margin-top:10px;">
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">一</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">二</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">三</a></li>
</ul>
</div>
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
</ul>
</div>
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">43</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">34</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">34</a></li>
</ul>
</div>
</div>
</div><body><button id="addform"></button></body>$(function(){
$("#addform")click(function(){
var form = $("<form></form>");
var select = $("<select></select>");
var option1 = $("<option>1</option");
var option2 = $("<option>2</option");
var option3 = $("<option>3</option");
selectappend(option1);
selectappend(option2);
selectappend(option3);
var input = $("<input type='text'/>");
formappend(select);
formappend(input);
$("body")append(form);
})
})这个插件没有定义控件的高度的配置，控件也没有设置高度，依据内容的高度来确定控件整体高度，你可以给样式添加高度即可。不过还是修改源代码来实现高度控制好点，可以随便配置，而不用统一 2者结合也可以 css覆盖部分，你也可以修改jquerymult
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）