Question

我正在使用此网站：http://www.u401769.gluweb.nl/

在移动设备上查看网站时，切换菜单出现问题。当您将其切换出来并在购物车按钮中保持可见时。

这是切换内容的代码。最后的按钮是不切换回来的按钮。

    <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true">
                     <div class="menu-hoofdmenu-container">

                                  <ul class="social_media">
                                     <li><a href="#"><img src="wp-content/themes/fairphone/img/social_icon_01.png"></a>
                                                    </li>
                                                    <li>
                                                    <a href="#"><img src="wp-content/themes/fairphone/img/social_icon_02.png"></a>
                                                    </li>
                                                    <li>
                                                    <a href="#"><img src="wp-content/themes/fairphone/img/social_icon_03.png"></a>
                                                    </li>
                                                    <li>
                                                    <a href="#"><img src="wp-content/themes/fairphone/img/social_icon_04.png"></a>
                                                    </li>
                                            </ul>

                                            <button type="button" class="shopping-cart">
                                            </button>
</div>

和切换菜单的按钮：

<button type="button" class="navbar-toggle menu-toggle" aria-controls="primary-menu" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">



                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>

我希望有人能够帮助我。提前谢谢。

Answer 1

我用css修复了这个问题，如下所示：

首先你需要在购物车按钮上添加display：none，所以它的风格如下：

.shopping-cart {
    background-image: url('img/shop_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    margin: 15px;
    float: right;
    background-color: #00a4de;
    border: none;
    box-shadow: none;
    padding: 12px 25px;
    display: none;
}

然后我们将添加样式，以便在菜单切换时使其可见：

.main-navigation.toggled .shopping-cart {
    display: block;
}

最后我们将为您添加以下样式，以便在屏幕宽度大于769px时始终显示该按钮：

@media screen and (min-width: 768px) {
    .shopping-cart{
        display:block;
    }
}

此按钮不会切换回

1 个答案: