Как скрыть форму расширенного поиска, используя CSS и HTML?

Question

Итак, я наткнулся на эту удивительную форму поиска . Демоверсию можно найти здесь . Я пытался понять, как скрыть окно расширенного поиска, следующим образом:

Это должна быть не ошибка, а какая-то кнопка, так что если пользователь нажал на нее, это расширит расширенный поиск. Кажется, я не могу понять, как это сделать.

Упрощенный код:

<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

Этого ответа должно хватить. Они используют соседний селектор брата для создания «кнопок» из промежутков в фокусе. Для вашего кода это будет выглядеть так:

<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, а затем установить v-if='show-advanced' на advance-search. При этом advance-search не будет отображаться, если show-advance не установлен на true

<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>

Поместите эту кнопку куда хотите, и там вы go!

edit
У меня есть скрипка работает изменил show-advanced на show, и я исправил ошибку, изменив v-bind на v-on

Answer 2

Дайте нам больше информации. Если вы хотите просто скрыть окно расширенного поиска, используйте следующий код

.advance-search
{
       display: none;
}

С jQuery

. Вы можете использовать jquery. Этот код работает, если вы добавляете jQuery в ваш html файл

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