在实现页面搜索栏高级搜索功能时,如果使用overflow的方式实现,在基础搜索下时overflow会隐藏掉layui的下拉框列表内容,导致看不到下拉内容的问题。

image.png
如何解决:
不使用overflow的方式使用表格或者一个白色div盖住高级搜索的内容,使用一种障眼法的方式实现了这种效果。让页面看起来只有基础搜索,其实就是另一种方式实现一种搜索栏展开收缩的效果,然后在点击高级搜索的时候动态去调整表格的高度及距离上面高级搜索内容的值,当点击高级搜索时调整表格和顶部的间距和表格高度,就能实现了下拉不被遮挡的效果

function changeTablePanel() {
  //重新设置表格高度
      var fromHeight = $(".search-box")[0]
        ? $(".search-box")[0].scrollHeight
        : 0;//搜索容器的高度
      var top = fromHeight + 132 + "px";
      $(".layui-table-body").css({
        height: "calc(100vh - " + top + ")",
      });

}

洛阳醉长安行
57 声望3 粉丝

charging...