WordPress菜单的Bootstrap折叠切换菜单问题

Question

我的问题是我有一个不想在全宽浏览器窗口中显示的菜单，当窗口宽度小于 768 像素时，可以通过单击切换栏看到它。
但是当我单击切换栏时，我发现折叠过渡不起作用。我已经测试删除“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（这是小屏幕的最大尺寸）。

由于您使用引导程序，因此您也可以将其应用于您的按钮。

<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