JS控制展开与收起

  • 作者: 凯哥Java
  • JS
  • 时间:2021-04-05 16:58
  • 70人已阅读
简介 有时候,我们在写查询条件的时候,查询条件会很多,会导致,查询条件就半屏幕,这样是不友好的。我们可以让查询条件,先只展示一部分,当点击展开的时候,在展示其他的,如下图:展开前:展开后:思路:使用js控制。需要隐藏的放在div里面,然后有js控制。html代码:<form id="formId">    <inpu

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

展开前:

352e69ac0cce999df5c1478a6d5a9b03.png

展开后:

9fc24c428cf07896d32e9f0d609556cf.png

思路:使用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>

318b99263188599b9a226e47f0156504.png

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

Top Top