Bootstrap проблема коллапса Edge и Firefox - PullRequest
Новая
       67

Bootstrap проблема коллапса Edge и Firefox

0 голосов
/ 17 июня 2020

У нас есть сайт WordPress с панелью поиска внутри заголовка. Вы можете переключить (свернуть) панель поиска, нажав на увеличительное стекло.

Это ahref для кнопки 

<a href="#search-bar-toggle" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="search-bar-toggle" class="">
    <i class="fa fa-search" aria-hidden="true"></i>
</a>

И это заголовок, в котором находится переключатель панели поиска: 

<header class="site-header">
    <div class="container" id="title-area">
        <div class="col-2 title-area">
            <?php if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
            <?php the_custom_logo(); ?>
            <?php else : ?> 
            <h1 class="site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="<?php bloginfo( 'name' ); ?>">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="100" height="50" />
                </a>
            </h1>
            <?php endif; ?>
        </div>
        <div class="col-10 widget-area header-widget-area">
            <?php dynamic_sidebar( 'header-right' ); ?>
        </div>
        <div class="col-12 collapse search-bar" id="search-bar-toggle">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 offset-md-2">
                            <?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

В Chrome и IE11 коллапс работает отлично, но на FireFox (77.0.1) и Edge он глючит. Когда я нажимаю кнопку, коллапс выходит, но сразу же снова сворачивается.

Я искал везде, а затем решил проверить, что он делает, когда я перемещал весь <div> с идентификатором search- bar-toggle "и поместите его после </header>.

Когда я это сделал, проблема в FireFox и Edge исчезла, но мне это нужно внутри <header>, потому что когда я перемещаю его за пределы заголовка он больше не работает в липком заголовке, который фиксируется вверху при спуске.

Может быть, это действительно глупый вопрос, но как я могу его решить, чтобы он также работал в FireFox и Edge?

...