5

我有以下代码

<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 元素的大小时，它会将元素向左移动一点？

演示在这里演示

4

1 回答 1

3

它是选择器上的剩余百分比属性#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%'});
    }
});
于 2011-06-04T14:44:42.573 回答