jQuery调整大小导致跳转 [英] Jquery resize causes jump

问题描述

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

I have created a small set of buttons in a <ul> element using jQuery. I am now trying to make that <ul> resizable by adding a handle to the top of it. The problem is when I try to resize the <ul> it jumps like in the images below. Why would this be happening.

调整大小之前

调整大小后

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>

推荐答案

问题是您是否将bottom属性固定为0，因此当您调整它的大小或更改位置时会出现问题bcoz 它将wrt更改为底部:0

problem is u have fixed bottom property to 0 so when u resize it or change position gives problem bcoz it changes wrt to 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调整大小导致跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！