Html 显示内部绝对定位div外部滚动div

这是我创建的一个示例演示-

如果单击任何复选框，下一列将显示滚动div中的水果列表。我想确保即使外部滚动div小于内部滚动div，也会完全显示此滚动div

如果有人能帮我解决这个问题，我将不胜感激。

---

提前谢谢

将您的函数更改为

$('.show_fruits').change(function() {
if(this.checked) {
   $(this).closest('tr').find('.fruit_list').show();
   $(this).closest('tr').find('td.fruit_list_wrapper').css('position', 'absolute');
}else{
    $(this).closest('tr').find('.fruit_list').hide();
  $(this).closest('tr').find('td.fruit_list_wrapper').css('position', 'relative');
}

}))

要显示的元素不能将属性“position”设置为“relative”，因此，当它出现时，您只需将其更改为“absolute”，当它必须隐藏时，再将其设置为“relative”

例如，您还可以创建另一个类

.fruit_list_wrapper_visible{
  position: absolute!important;
}

在函数中添加一行，如下所示

$('.show_fruits').change(function() {
    if(this.checked) {
       $(this).closest('tr').find('.fruit_list').show();       
    }else{
        $(this).closest('tr').find('.fruit_list').hide();
    }

    $(this).closest('tr').find('td.fruit_list_wrapper').toggleClass('fruit_list_wrapper_visible');
});

编辑-

---

正如作者所提到的，唯一的问题是，如果滚动外部div，内部水果列表将保持在相同的位置。要解决这个问题，只需将“z-index:1；”“添加到“水果列表包装器”类中。

非常感谢您的快速帮助。这很有效。唯一的问题是，如果我滚动外部div，内部水果列表将保持在相同的位置。我们是否可以做些什么，使它总是从相应行的顶部开始？哦。。没错，只要将“z-index:1；”添加到“水果列表包装器”类中，这个问题就解决了：）即使使用z-index，问题仍然存在。如果滚动外部div，列表将保持原来显示的位置。所有其他元素都会随着滚动而移动。我用您提供的解决方案更新了我的演示。

$('.show_fruits').change(function() {
    if(this.checked) {
       $(this).closest('tr').find('.fruit_list').show();       
    }else{
        $(this).closest('tr').find('.fruit_list').hide();
    }

    $(this).closest('tr').find('td.fruit_list_wrapper').toggleClass('fruit_list_wrapper_visible');
});