Question

我使用jQuery在<ul>元素中创建了一小组按钮。我现在正试图通过在其顶部添加句柄来使<ul>可调整大小。问题是，当我尝试调整<ul>的大小时，它会像下面的图像一样跳跃。为什么会发生这种情况。

调整大小之前 Before Resize

调整大小后 After Resize

jQuery用于生成元素：

function create_bar() {
        var table_container = $("<ul />", {
            class: "app_container_T t_ul ui-widget-content"
        });
        table_container.resizable({ handles: "n" });
            var row = $("<li />");
                var menu = $("<ul />", {
                    class: "menu_T t_ul"
                });
                    var section_1 = $("<li />");
                        var add_element_button = $("<button />", {
                            text: '+',
                            click: add_content_selection_element,
                            class: "large_menu_button_T"
                        });
                        section_1.append(add_element_button);                                      
                        /*Rest of the buttons are created and added in the same way*/
                    menu.append(section_1);
                row.append(menu);
            table_container.append(row);
        $('body').append(table_container);

CSS

.app_container_T {
    position:fixed;
    bottom:0;
    left:0;
    z-index: 998;
    background-color:grey;
    margin: 0;
    padding: 0;
}
.app_container_T > li {
    /*create a class for them to share itll be faster, like t_ul*/
    display: inline-block;
}
.t_ul {
    list-style: none;
}
.app_container_T * {
    box-sizing: border-box;
    border-radius:5px;
    vertical-align : text-bottom;
}
.menu_T {
    background-color:lightblue;
    padding: 0px;
    width:60px;
}
.large_menu_button_T {
    background: #0016f0;
    color: #ffffff;
    height: 50px;
    width: 50px;
    margin: 3px;
    font-size: 20px;
    border-radius:10px;
}
.ui-resizable-n {
    cursor: n-resize;
    width: 100%;
    top: 0px;
    left: 0;
    border-top: 5px solid #f00;
    z-index: 999;
}

结果HTML

<ul class="app_container_T t_ul ui-widget-content ui-resizable">
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90; display: block;"></div>
    <li>
        <ul class="menu_T t_ul">
            <li>
                <button class="large_menu_button_T">+</button>
                <button class="large_menu_button_T">T</button>
                <button class="small_menu_button_T options">o</button>
            </li>
        </ul>
    </li>
</ul>

Answer 1

问题是你有固定的底部属性为0所以当你调整它或改变位置给出问题bcoz 它将wrt改为bottom：0

.app_container_T {
    position:fixed;
    bottom:0; ////// remove this then change top no problem
    left:0;
    z-index: 998;
    background-color:grey;
    margin: 0;
    padding: 0;
}

Jquery调整大小导致跳转

1 个答案: