我有以下代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main-content {
width:300px;
height:500px;
background:#00F;
overflow:auto;
}
#top-name , #top-ip {
background:#000;
color:#FFF;
width:80%;
position:relative;
left:10%;
margin-bottom:5px;
margin-top:5px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$("#top-ip").resizable({
handles: 'n, s'
});
$("#extrainfo").hide();
$("#top-name").mouseenter(function() {
$("#extrainfo").fadeIn();
});
$("#top-name").mouseleave(function() {
$("#extrainfo").fadeOut();
});
var stop = false;
$( "#accordion h2" ).click(function( event ) {
if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$( "#accordion" )
.accordion({
header: "> div > h2"
})
.sortable({
axis: "y",
handle: "h2",
stop: function() {
stop = true;
}
});
});
$(function() {
$( "#accordion" ).resizable({
maxHeight: 100,
resize: function() {
$( "#accordion" ).accordion( "resize" );
}
});
});
</script>
</head>
<body>
<div id="main-content">
<div id="top-name">
Name here
<div id="extrainfo">
blanl</div>
</div>
<div id="top-ip">
Resizalbe element
</div>
<div id="accordion">
<div>
<h2>Player List</h2>
<div style="background:#F00">
OMG OMG OMG OMG
</div>
</div>
<div>
<h2>Configs</h2>
<div>
OMG OMG OMG OMG
sdg<br />
SDF
sDsag
sdzh
z<br />
zh<br />
zh
</div>
</div>
<div>
<h2>Comming Soon</h2>
<div>
Comming Soon Zong
OMG OMG OMG OMG
</div>
</div>
<div>
<h2>Server Disscussion</h2>
<div>
Server Disscussion
Server Disscussion
</div>
</div>
<div>
<h2>comming Soon</h2>
<div>
comming Soon
comming Soon
</div>
</div>
</div>
</div>
</body>
</html>
当我调整 ip 元素的大小时，它会将元素向左移动一点吗？
此处演示 Demo
最佳答案
它是#top-name, #top-ip 选择器上的百分比左侧属性。我惊讶地发现jQuery UI #2421增强请求已经存在 3 年了!
在该问题得到解决之前，如果将 left 属性设置为非百分比值(30px 看起来差不多)，则调整大小将按预期进行。
编辑:我找到了解决方法。您可以使用resize函数在调整大小期间继续设置left值。如果将代码更改为此，调整大小将按预期工作，并且不会更改元素的左侧位置。
$("#top-ip").resizable({
handles: 'n, s',
resize: function(event, ui) {
$(this).css({left:'10%'});
}
});
关于Jquery 可调整大小改变我的 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6237100/