Question

我知道这很奇怪，但我已经使用菜单栏whitout nav标记来获取代码..

我想要的是什么：有一个汉堡图标（没关系）。当用户点击它时，菜单缓慢向下滑动（我使用带有jQuery的slideToggle功能）。

为此，必须隐藏菜单，但如果我将其隐藏在小屏幕（手机）中，它也隐藏在大屏幕上！

我拥有的内容：此代码：

<div class="col-xs-1 hidden-sm hidden-md hidden-lg">
    <span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span>
</div>

<div class="col-xs-12 col-sm-8 menu-nav hidden-xs">
    <div class="row text-center">

         <a href="{{ path('jt_concours_index') }}">
            <div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span>
            </div>
         </a>
         <a href="#">
            <div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span>
            </div>
         </a>
    </div>
</div>

JS：

$('#hamburger').on('click', function(){
            if ($('.menu-nav').hasClass('hidden-xs')){
                $('.menu-nav').removeClass('hidden-xs');
            } else {
                $('.menu-nav').addClass('hidden-xs');
            }

            $('.menu-nav').slideToggle('slow');
        });

但它不起作用..有个主意吗？

编辑

我最终使用了bootstrap中的collapse类，如下所示：

<button class="toggle" data-toggle="collapse" data-target=".menu-nav">
     <span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span>
</button>

<div class="col-xs-12 col-sm-8 menu-nav collapse">
    <div class="row text-center">

        <a href="{{ path('jt_concours_index') }}">
            <div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span>
            </div>
        </a>
        <a href="#">
            <div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span>
             </div>
        </a>

现在它工作正常。谢谢:)）

Answer 1

您是否尝试将其从display：none更改为例如display：block而不是使用hidden -nn类？你也可以为它创建自己的隐藏类。

响应式导航栏没有导航标签Bootstrap3

1 个答案: