Question

我有一个PHP脚本，该脚本从数据库获取数据并将其显示在2列表中。我对每个结果都有一个隐藏/显示，它会向下扩展，单击时也将其下方的任何选项下推。

但是另一方面，列中的结果也向下移动。

如何做到这一点，以便只有具有单击的隐藏/显示的列才能打开并向下移动？

下面是我用来显示隐藏/显示的代码；我以为通过添加.closest('td')可能会有所帮助，但它所做的只是打开相应的左侧或右侧隐藏/显示div！

$(document).ready(function(){  
    $(".reveal-arrow").click(function(){
        $(this).parents('.template-container').find('.reveal-container').slideToggle();
        $(this).toggleClass('flip');
    });
});

更新：我对这里发生的事情做了简化：https://jsfiddle.net/r1bf4odx/18/

如您所见，如果单击BOX1上的向下箭头，则它1向下打开，但是BOX 2也向下移动。如何停止Box 2移动并保持原样！再次感谢！

请记住，我从数据库中获得了很多结果！

Answer 1

问题在于您使用的是表格，表格的默认对齐方式为baseline / middle（有关更多信息，请参见here (SO)）。

您可以添加

td { vertical-align: top; }

修复移动框

更新的小提琴：https://jsfiddle.net/r1bf4odx/21/

隐藏/显示div的表移动错误的div

1 个答案: