再次单击菜单按钮时引导菜单未关闭

Question

我正在使用 bootstrap 3，在小型设备上，汉堡包图标按预期显示。

如果我单击菜单图标，则会出现移动菜单。到目前为止，一切都很好。

问题是，当我再次单击汉堡包图标时，我需要菜单折叠回来，但这不起作用。

我还必须包含一些自定义 js，以便在单击菜单条目和正文时关闭它。

这是我用来显示导航栏的代码：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="/">
                <img src="<?php echo get_template_directory_uri() . '/assets/img/logo.png' ?>" alt="<?php bloginfo('description'); ?>" title="<?php bloginfo('name'); ?>"/>
             </a>
        </div>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1" aria-expanded="false" style="height: 1px;">
       <?php
          wp_nav_menu(array(
            'menu' => 'top_menu',
            'header-menu' => ('Header Menu'),
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav navbar-nav',
            'walker' => new wp_bootstrap_navwalker())
          );
       ?>
       <ul class="nav navbar-nav navbar-right">
        <a href="/booking" class="btn btn-transparent uppercase align-element-center nav-bar hidden-xs">Test</a>
       </ul>
    </div>
 </nav>

这是我必须添加的 JavaScript，以便在单击菜单条目和/或主体时使其折叠，以及在菜单展开时单击汉堡包图标时尝试使其再次关闭：

$('.navbar-nav li a').click(function() {
  console.log('clicked');
  $('.navbar-collapse').attr('aria-collapsed', false);
  return $('.navbar-collapse').collapse('hide');
});

$(document).on('click', function() {
  return $('.collapse').collapse('hide');
});

// Not working!
$('.navbar-toggle').click(function() {
  var expandedMenu;
  expandedMenu = $('.navbar-collapse');
  if (expandedMenu.hasClass('in')) {
    console.log(expandedMenu.hasClass('in'));
    expandedMenu.collapse('hide');
    return expandedMenu.removeClass('in');
  }
});

Answer 1

确保您没有在代码中两次包含引导脚本。