求助：实现搜索栏中filter div的滑动下拉菜单效果

我做了一个带筛选功能的搜索栏，设置了areaUnit、area和price三个筛选条件来实现精准搜索，但当前的filter div会干扰页面布局。我希望这个filter div能像下拉菜单一样滑动展开收起，以下是我尝试的代码：

<form>
    <div class="wrap">
        <div class="search">
            <input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
            <button type="submit" class="searchButton">
                <i class="fa fa-search"></i>
            </button>
        </div>
        
        <div id="filter" style="display:none; background-color:#D3D3D3;border:1px; border-style:solid; border-color:black; border-radius:5px">
            <label for="price"style=" margin-left:75px;border:none" >Area Unit</label>
            <label for="price"style=" margin-left:30px;border:none " >Area</label>
            <label for="price" style=" margin-left:70px;border:none">Price</label>
            <div>
                <select asp-for="Input.areaunit"  style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:100px;">
                    <option value="" hidden>Select area Unit</option>
                    <option value="Kanal">Kanal</option>
                    <option value="Marla">Marla</option>
                    <option value="Square Feet">Square Feet</option>
                    <option value="Square Meter">Square Meter</option>
                    <option value="Square Yards">Square Yards</option>
                </select>
                
                <input list="Input.area.list"asp-for="Input.area" placeholder="Please Select area" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
                <datalist id="Input.area.list">
                    <option value="10"></option>
                    <option value="12"></option>
                    <option value="15"></option>
                    <option value="20"></option>
                    <option value="25"></option>
                    <option value="30"></option>
                    <option value="35"></option>
                </datalist>
        
                <input type="hidden" name="Input.price" id="Input.price"asp-for="Input.price" />
                <!-- Hidden field above-->

                <input list="Input.price.list" id="rsInput" placeholder="Please Select price" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
                <datalist id="Input.price.list">
                    <option value="5,00,000"></option>
                    <option value="10,00,000"></option>
                    <option value="15,00,000"></option>
                    <option value="20,00,000"></option>
                    <option value="25,00,000"></option>
                    <option value="30,00,000"></option>
                    <option value="35,00,000"></option>
                    <option value="40,00,000"></option>
                    <option value="45,00,000"></option>
                </datalist>
            </div>
        </div>
    </div>
</form>

当前视图效果：

要让筛选面板不干扰布局并实现滑动展开收起，核心是用CSS脱离文档流定位+过渡动画，配合JavaScript控制状态：

1. 调整HTML结构与基础样式 #

给搜索栏容器添加相对定位作为筛选面板的定位参考，同时优化筛选面板的默认样式：

<form>
    <div class="wrap">
        <!-- 给搜索容器添加相对定位，作为筛选面板的定位基准 -->
        <div class="search" style="position: relative;">
            <input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses">
            <!-- 新增筛选按钮，替代点击输入框触发，避免误触 -->
            <button type="button" class="filterButton" onclick="toggleFilter()">
                <i class="fa fa-filter"></i>
            </button>
            <button type="submit" class="searchButton">
                <i class="fa fa-search"></i>
            </button>
        </div>
        
        <!-- 修改筛选面板样式，添加绝对定位和过渡效果 -->
        <div id="filter" style="display:none; position: absolute; top: 100%; left: 0; right: 0; background-color:#D3D3D3; border:1px solid black; border-radius:5px; margin-top: 5px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
            <label for="areaunit" style="margin-left:75px;border:none">Area Unit</label>
            <label for="area" style="margin-left:30px;border:none">Area</label>
            <label for="price" style="margin-left:70px;border:none">Price</label>
            <div>
                <select asp-for="Input.areaunit" id="areaunit" style="height :50px; border:1px solid black; border-radius:5px; margin-left:100px;">
                    <option value="" hidden>Select area Unit</option>
                    <option value="Kanal">Kanal</option>
                    <option value="Marla">Marla</option>
                    <option value="Square Feet">Square Feet</option>
                    <option value="Square Meter">Square Meter</option>
                    <option value="Square Yards">Square Yards</option>
                </select>
                
                <input list="Input.area.list" asp-for="Input.area" placeholder="Please Select area" style="height :50px; border:1px solid black; border-radius:5px; margin-left:20px;">
                <datalist id="Input.area.list">
                    <option value="10"></option>
                    <option value="12"></option>
                    <option value="15"></option>
                    <option value="20"></option>
                    <option value="25"></option>
                    <option value="30"></option>
                    <option value="35"></option>
                </datalist>
        
                <input type="hidden" name="Input.price" id="Input.price" asp-for="Input.price" />

                <input list="Input.price.list" id="rsInput" placeholder="Please Select price" style="height :50px; border:1px solid black; border-radius:5px; margin-left:20px;">
                <datalist id="Input.price.list">
                    <option value="5,00,000"></option>
                    <option value="10,00,000"></option>
                    <option value="15,00,000"></option>
                    <option value="20,00,000"></option>
                    <option value="25,00,000"></option>
                    <option value="30,00,000"></option>
                    <option value="35,00,000"></option>
                    <option value="40,00,000"></option>
                    <option value="45,00,000"></option>
                </datalist>
            </div>
        </div>
    </div>
</form>

2. 编写滑动展开收起逻辑 #

替换原来的filterfunction()，通过修改max-height实现平滑过渡：

function toggleFilter() {
    const filterDiv = document.getElementById('filter');
    if (filterDiv.style.maxHeight === '0px' || filterDiv.style.maxHeight === '') {
        filterDiv.style.display = 'block';
        // 设置足够大的max-height确保内容完全展开
        filterDiv.style.maxHeight = '200px';
    } else {
        filterDiv.style.maxHeight = '0px';
        // 过渡结束后隐藏，避免空白区域误触
        setTimeout(() => {
            filterDiv.style.display = 'none';
        }, 300);
    }
}

3. 关键样式说明 #

• position: absolute：让筛选面板脱离文档流，不会挤压下方页面元素
• top: 100%：让面板紧贴搜索栏底部，保持下拉菜单的层级关系
• max-height: 0 + overflow: hidden：默认收起状态，隐藏超出内容
• transition: max-height 0.3s ease：实现平滑的滑动展开/收起动画

额外优化：点击外部收起面板 #

添加全局点击监听，点击页面其他区域自动收起筛选面板：

document.addEventListener('click', function(e) {
    const filterDiv = document.getElementById('filter');
    const searchContainer = document.querySelector('.search');
    if (!searchContainer.contains(e.target) && filterDiv.style.maxHeight !== '0px') {
        filterDiv.style.maxHeight = '0px';
        setTimeout(() => {
            filterDiv.style.display = 'none';
        }, 300);
    }
});

内容的提问来源于stack exchange，提问作者Qasim Asghar