javascript - Bootstrap 折叠切换菜单问题与 WordPress 菜单

Question

我的问题是我有一个菜单，我不想在全宽浏览器窗口中显示，当窗口宽度小于 768px 时，可以通过点击切换栏看到它。
但是我发现当我点击切换栏时折叠过渡不起作用。我测试去掉“full-hide”类，没问题，一切正常。
我想要正常过渡。我该怎么办？
非常感谢你的帮助。
:>

这是我的菜单代码

<div class="full-hide" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

在 style.css 中，

.full-hide{ display: none;}

切换条码

    <button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true">
    </span>
    </button>

Answer 1

如果我没理解错的话，您希望按钮显示为 768(这是小屏幕的最大尺寸)。

由于您使用 Bootstrap ，因此您也可以将其应用于您的按钮。

<button type="button" class="navbar-toggle collapsed hidden-md hidden-lg" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true"></span>
</button>

对其应用类 hiddden-md 和 hidden-lg。当您的屏幕变窄时，它只会显示按钮。

可选:如果您使用单独的菜单，也可以将此技巧应用于您想要以这种方式显示的菜单。我不确定，因为如果这是您的主菜单并将 BootStrap 应用到它，或者您将其分开(我在移动开发中主要使用不同类型的菜单)

<div class="hidden-md hidden-lg" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

参见文档 http://getbootstrap.com/css/#responsive-utilities