代码之家 › 专栏 › 技术社区 › Danilo Bargen

jQuery向下滑动+CSS浮动

user-interface css html jquery

Danilo Bargen · 技术社区 · 16 年前

单击第一行时,使用jQuery显示第二行 show() . 这是相当不错,但我更喜欢幻灯片效果。

问题是,在details行中,有两个浮动div,一个浮动在左侧,一个浮动在右侧。现在,如果我向下滑动先前隐藏的行,包含的div会表现出奇怪的行为并“四处跳转”。请看这个动画gif来理解我的意思: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif

<tr class="row-vm">
    <td>...</td>
    ...
</tr>
<tr class="row-details">
    <td colspan="8">
        <div class="vmdetail-left">
        ...
        </div>
        <div class="vmdetail-right">
        ...
        </div>
    </td>
</tr>

CSS:

.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; }
div.vmdetail-right { float: right; width: 50%; }

以及jQuery代码:

if ($(this).next().css('display') == 'none')
{
    // Show details
    //$(this).next().show();
    $(this).next().slideDown();
}
else
{
    // Hide details
    //$(this).next().hide();
    $(this).next().slideUp();
}

有没有办法修复这种行为,并实现一个很好的幻灯片效果?

1 回复 | 直到 16 年前

mVChr 16 年前

摘要:显示/隐藏tr,使用slideUp/slideDown设置div的动画

.table-vmlist tr.row-vm { cursor:pointer; }
.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; display:none; }
div.vmdetail-right { float: right; width: 50%; display:none; }

(div从隐藏开始。还添加了指针光标到可点击的tr(以便于使用)

$('tr.row-vm').bind('click',function(e){
    if ($(this).next().css('display') == 'none')
    {
        // Show tr, slideDown inner divs
        $(this).next().show().find('div').slideDown('slow');
    }
    else
    {
        // slideUp inner divs, hide parent tr after animation complete
        $(this).next().find('div').slideUp('slow',function(){
            $(this).parent().parent().hide();
        });
    }
});

(注意divs的直接父级是td,因此父级调用两次以访问tr。还增加了滑动速度。)

推荐文章

Seg · _tkinter。TclError|TCL安装不正确。FreeSimpleGUI中出错

1 年前

FranticFronk · Tkinter单选按钮在已选择时执行命令

1 年前

Kumkuatte · 如何将UI元素对齐到Unity中的左侧位置

1 年前

Calax · GUI不显示所有组件(C++)

2 年前

trassert · python flet容器

2 年前

Shady Abdulmunim · 喷气背包组合中的扫掠渐变圆形进度条

2 年前

Jason Parmar · 伪OSS错误:校验和输入流计算器不支持标记

2 年前

Kdwk · 为什么添加这个Flutter小部件会使应用程序对鼠标点击没有响应?

2 年前

zadisk8 · 带有Q拆分器和多级选项卡的PyQt5

2 年前

Patrick Visi · Zitadel日常创建服务用户

2 年前