时间戳

首页 > 解决方案 > 如何使用 CSS 和 HTML 隐藏高级搜索表单？

html - 如何使用 CSS 和 HTML 隐藏高级搜索表单？

问题描述

所以我遇到了这个很棒的搜索表单。演示可以在这里找到。我试图弄清楚如何隐藏高级搜索框，如下所示：

在此处输入图像描述

它不一定是错误，而是一些按钮，因此如果用户单击它，它将展开高级搜索。我似乎无法弄清楚该怎么做。

简化代码：

<div class="s009">
    <form>
        <div class="inner-form">
            <div class="basic-search">
                <div class="input-field">
                    <b-form-input v-model="search_text" id="search" placeholder="Type Keywords"></b-form-input>
                    <div class="icon-wrap">
                        <svg class="svg-inline--fa fa-search fa-w-16" fill="#ccc" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="advance-search">
                <span class="desc">ADVANCED SEARCH</span>
            </div>
        </div>
    </form>
</div>

是否可以为此建议一些 CSS/HTML 解决方案？

标签： htmlcss

解决方案

给我们更多信息。如果您只想隐藏高级搜索框，请使用以下代码

.advance-search
{
       display: none;
}

使用 jQuery

您可以使用 jquery。如果您在 html 文件中使用添加 jQuery，则此代码有效

$('document').ready(() => {
        $('button').on('click', function () {
            $('.advance-search').css('display', 'none')
        })
})

推荐阅读