html - 没有导航标签的响应式导航栏 Bootstrap3

Question

我知道这很奇怪，但我使用了带有菜单栏的代码，但没有 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 类？你也可以为它创建你自己的隐藏类。