Question

我有一个div结构： html文件：

<!doctype html>
<html lang="us">
    <head>
        <title>Test Area</title>
            <meta charset="utf-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <br/>
        <div class="container">
            <div class="col-md-3 col-md-offset-2">
                <div class="box">
                    <div class="tile"></div>
                    <div id="resizable" class="tile" style="background-color: darkblue"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                </div>
            </div>
        </div>
    </body>
</html>

css文件“stylesheet.css”：

.box {
    width: 200px;
    margin: 0 auto;
    background-color: #ADD8E6;
    border: 2px solid dodgerblue;
}
.tile {
    width:100%;
    min-height:25px;
    background-color: palegreen;
    border-bottom: 1px solid black;
}
.tile:last-child {
    border-bottom: 0px;
}

我希望id为“resizable”的那个只能在y轴（向下）中调整大小。如果我调整它的大小超过下一个div高度的一半，我希望下一个div消失，并且可调整大小的一个调整大小以填充释放的空间（div的数量消失总结）。在此过程中，（div类）框的高度应保持不变。这是我的jQuery代码“scripts.js”：

$(document).ready(function(){ 
    $("#resizable").resizable({
        containment: "parent",
        handles: "s",
        ghost: true,
        grid: [0, 26], //25 height + 1 border
        stop: function(event, ui){
            var before = ui.originalSize['height'];
            var after = ui.size['height'];
            if(after > before){
                var diff = after - before;
                var numberOfTiles = Math.round(diff/26);
                ui.element.css('height',before + numberOfTiles * 26 );
                ui.element.css('width','100%');
                var object = $(this);
                for(var i = 0; i < numberOfTiles; i++){
                    object = object.next();
                    object.hide();
                }
            }
        }
    });
});

问题是resized div从（div类）框中脱颖而出。我不知道是什么原因。

jQuery resizable可以破坏div的结构

0 个答案: