查询布局

@{
    ViewBag.Title = "KendoUI.CRUD";
}

@section styles{
    <style>

        .tool_bar {
            padding: 6px;
            margin: 8px 8px;
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }

        .query_toolbar, .query_toolbar_more {
            display: flex;
            /*flex-wrap: wrap;*/
            border-radius: 4px;
            width: 90%;
            margin-bottom: 2px;
            margin-top: 2px;
        }


        .query_toolbar .form-item {
            display: flex;
            line-height: 30px;
            margin-right: 8px;
            width:20%
        }

        .query_toolbar_more .form-item {
            display: flex;
            line-height: 30px;
            margin-right: 8px;
            width: 20%
        }

        

        .query_toolbar .form-item .form-item-label {
            min-width: 48px;
        }


        .query_toolbar_more .form-item .form-item-label {
            min-width: 48px;
        }


            .query_toolbar .btn_toolbar {
                margin-right: 10px
            }
    </style>
}
<div class="tool_bar">
    <div class="query_toolbar">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>

    </div>
    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div class="form-item animate__animated animate__fadeIn" style="width:10%">
        <button type="button" class="btn btn-info btn_toolbar">查询</button>
        <button type="button" class="btn btn-primary btn_toolbar btn_toolbar_open" onclick="openmore(true)">展开</button>
        <button type="button" class="btn btn-primary btn_toolbar btn_toolbar_close" onclick="openmore(false)">收缩</button>
    </div>
</div>






@section scripts{

    <script>
        function openmore(isShow) {
            if (isShow) {
                $(".query_toolbar_more").removeClass('animate__slideOutUp');
                $(".query_toolbar_more").addClass('animate__slideInDown animate__faster');
                $(".query_toolbar_more").show();
                $(".btn_toolbar_open").hide();
                $(".btn_toolbar_close").show();
            }
            else {
                $(".btn_toolbar_close").hide();
                $(".btn_toolbar_open").show();
                $(".query_toolbar_more").addClass('animate__slideOutUp animate__faster');
                $(".query_toolbar_more").removeClass('animate__slideInDown');
                setTimeout(() => {
                    $(".query_toolbar_more").hide();
                },100)
            }
            
        }

        $(function () {

        })
    </script>

}

标签：__,布局,查询,名称,query,animate,toolbar,more
来源： https://www.cnblogs.com/cyjngup/p/15659294.html