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

Question

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

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

简化代码：

<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 解决方案？

Answer 1

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

.advance-search
{
       display: none;
}

使用 jQuery

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

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

Answer 2

这个answer 应该足够了。他们使用adjacent sibling selector 在焦点范围之外创建“按钮”。对于您的代码，它看起来像这样。

<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>
****        <span class="show">Show</span>
****        <span class="hide">hide</span>
            <div class="advance-search">
                <span class="desc">ADVANCED SEARCH</span>
            </div>
        </div>
    </form>
</div>

和css

span.show:focus ~ .advance-search{ display: none;}
span.hide:focus ~ .advance-search{ display: block;}

加两

根据您的问题，最初我试图仅使用 html/css 来执行此操作，但是您评论了使用 Vue。所以vue需要注意三点：

1. 您可以将组件状态存储在data
2. 您可以使用v-if 显示和隐藏元素
3. 您可以使用v-on 更改事件的组件状态

所以你想存储数据show-advanced: false，然后在advance-search 上设置v-if='show-advanced'。除非将show-advance 设置为true，否则不会显示advance-search

<div class="advance-search" v-if='show'>...</div>
<script>
new Vue({
  ...
  data: {
    'show': false
  }
  ...
})
</script>

要创建一个切换按钮，您需要一个属性为 v-on:click="show=!show" 的按钮。

<button v-on:click="show=!show">Toggle</button>

把那个按钮放在你想要的任何地方，然后就可以了！

编辑
我有一个fiddle 工作，将show-advanced 更改为show，并修复了将v-bind 更改为v-on 的错误