利用JQuery+bootstrap进行多条件搜索展开收起查询条件

一渊之隔

已于 2023-07-18 17:40:12 修改

阅读量1.7k

点赞数

分类专栏： jQuery 文章标签： jquery 前端 javascript bootstrap

于 2021-12-10 17:19:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37263478/article/details/121860743

版权

本文介绍了如何利用JQuery和Bootstrap实现多条件搜索时查询条件的展开与收起功能。主要内容包括HTML结构设计，其中每个条件行都分配了相同的类名group；CSS样式设置，特别是使用绝对定位和父元素的相对定位来实现展开收起的视觉效果；以及JavaScript部分，通过文字切换和toggle方法控制条件的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收起效果

主要html（注意：把每行定义同一个类名 group）

 <div class="search">

                <div class="group">
                    <div class="form-group col-lg-4 col-md-4 col-sm-6"> <label for=""> 项目名称：</label>
                        <input name="txtTitle" type="text" id="txtTitle" class="textBase1"></div>


                    <div class="form-group col-lg-4 col-md-4 col-sm-6">
                        <label for=""> 所属地区：</label>
                        <input name="txtArea" type="text" readonly="readonly" id="txtArea" class="textBase1" width="30%"
                            onclick="dos();" onfocus="this.blur()">
                        <input type="button" name="sub" onclick="dos();" class="butBase1" value="选择地区"
                            style="display: inline-block;"></div>


                    <div class="f

最低0.47元/天解锁文章