0

这是我的代码，整体设计很快就会得到改进。目前只是让它发挥作用。

无论如何，问题是在手机上单击导航栏切换按钮时，菜单会立即显示并消失。

<div class="header-main white">
<div class="container-fluid">
    <div class="logo">
        <a href="https://www.missioncurling.org"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Mission Curling"></a>
    </div>
    <div class="responsive-logo">
        <a href="https://www.missioncurling.org"><img src="<?php echo get_template_directory_uri(); ?>/img/mcc-logo.png" alt="Mission Curling"></a>
    </div>
    <div class="main-menu">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"> </span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand visible-xs" href="#"></a>
            </div>

            <div class="navbar-collapse collapse" id="bs-navbar-collapse">
                <ul class="nav navbar-nav list-inline">

                    <?php
    wp_nav_menu( array(
            'menu'              => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-navbar-collapse',
            'menu_class'        => 'nav navbar-nav list-inline sub-menu normal-sub',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
                </ul>
        </nav>
        </div>

    </div>
</div>

虽然更好的是这里是我遇到问题的网站的链接。冰壶网站我正在为他们建立一个新的 wordpress 网站。

据我所知，单击切换后它会变为活动状态。

.collapse {
    display: none;
    visibility: hidden;
}

因此，如果我手动更改该可见性，则它可以正常工作。有什么明显的突出吗？

4

1 回答 1

1

在移动布局中，当单击菜单按钮时，它会在“导航栏折叠折叠”中添加“显示”类，因此折叠的可见性隐藏属性保持不变。要解决这个问题，您可以visibility : visible在显示类中添加属性，也可以visibility : hidden从折叠类中删除该属性，因为显示类正在覆盖折叠的显示属性，因此它可以在没有可见性属性的情况下正常工作..

只需尝试覆盖您的引导属性。

.collapse {
display: none;
visibility: visible !important;
}
于 2019-10-16T04:46:11.753 回答