Блог

У меня есть код ниже. <form> Теги дублируются. Когда я удаляю один из них, ввод не работает. Я в замешательстве. Почему это происходит?

Живая сеть : https://cutt.ly/sEUKj5z

В заголовке нажмите значок поиска.Ввод будет отображаться с помощью javascript.

 <form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
                <input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
                       value="<?php echo get_search_query() ?>" name="s"
                       id="search-input"
                       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </form>
                <style>
                    .search {display: inline-block} /* prevent 100% width */
                    .search .fa-search {left: auto; right: 10px;}
                </style>
                <form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
                <input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
                       value="<?php echo get_search_query() ?>" name="s"
                       id="search-input"
                       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </form>
                <style>
                    .search {display: inline-block} /* prevent 100% width */
                    .search .fa-search {left: auto; right: 10px;}
                </style>
 

Я иду на риск и предполагаю, что под «не работает» вы подразумеваете, что не видите поле ввода после удаления второй формы.

Причина в том, что панель навигации имеет отрицательное верхнее поле, которое подталкивает ее вверх, по-видимому, чтобы скрыть дублирующуюся форму, поэтому, когда вторая форма удаляется, она закрывает оставшуюся.

Чтобы решить эту проблему, перейдите к #sticky-header-navbar > div > nav селектору и удалите строку margin-top: -45px; .