有时候，我们在写查询条件的时候，查询条件会很多，会导致，查询条件就半屏幕，这样是不友好的。我们可以让查询条件，先只展示一部分，当点击展开的时候，在展示其他的，如下图:

展开前：

展开后：

思路：使用js控制。需要隐藏的放在div里面，然后有js控制。

html代码：

<form id="formId">
    <input type="hidden" id="sysBatchNumber" name="sysBatchNumber">
    <input type="hidden" id="columns3" name="columns3">
    <input type="hidden" id="limitPageSize" name="pageSize" value="10" >
    <input type="hidden" id="limitPageNo" name="pageNum" value="1">
    <div class="select-list">
        <ul>
            <li>
                <label>系统排序：</label>
                <input type="text" name="sysBatchNumberSort"/>
            </li>

            <li>
                <label>款号：</label>
                <input type="text" name="modelNum"/>
            </li>
            <li>
                <label>品名：</label>
                <input type="text" name="productName"/>
            </li>
            <li>
                <label>原厂编号：</label>
                <input type="text" name="oemNo"/>
            </li>
            <div >
                <a href="javascript:show();" id="my_btn"  > 展开↓</a>
            </div>

           <div id="hiddenli" style="display:none">
               <li>
                   <label>批次：</label>
                   <input type="text" name="batchNo"/>
               </li>
               <li>
                   <label>流水号：</label>
                   <input type="text" name="serialNumber"/>
               </li>
               <li>
                   <label>是否O2O线上商品：</label>
                   <select name="o2oFlag" th:with="type=${@dict.getType('buss_yes_no')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>品牌：</label>
                   <input type="text" name="brand"/>
               </li>
               <li>
                   <label>年份：</label>
                   <input type="text" name="particularYear"/>
               </li>
               <li>
                   <label>季节：</label>
                   <select name="season" th:with="type=${@dict.getType('order_temp_season')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>小类：</label>
                   <select name="subclass" th:with="type=${@dict.getType('order_temp_subclass')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>品类：</label>
                   <select name="category" th:with="type=${@dict.getType('order_temp_category')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>原产地：</label>
                   <input type="text" name="countryOrigin"/>
               </li>
               <li>
                   <label>是否可以作为赠品：</label>
                   <select name="giftFlag" th:with="type=${@dict.getType('buss_yes_no')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>下传官网状态：</label>
                   <select name="officialWebStatus" th:with="type=${@dict.getType('buss_yes_no')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
               <li>
                   <label>可用：</label>
                   <select name="availableStatus" th:with="type=${@dict.getType('buss_yes_no')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>

               <li>
                   <label>状态：</label>
                   <select name="status" th:with="type=${@dict.getType('sys_common_status')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
           </div>
           <p>
               <li>
                   <a class="btn btn-primary btn-rounded btn-sm" onclick="tableSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                   <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
               </li>
           </p>
        </ul>
    </div>
</form>

JS代码：

// 收缩展开效果
function show(){
    $("#hiddenli").show();
    $("#my_btn").html('收起↑');
    document.getElementById('my_btn').href="javascript:hide();";
}


function hide(){
    $("#hiddenli").hide();

    $("#my_btn").html('展开↓');
    document.getElementById('my_btn').href="javascript:show();";
}

注意：因为使用了Jquery.需要在页面中引入JQuery