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

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

Answer 2

如果你正在使用bootstrap的javascript，则根本不需要添加自定义代码，以使崩溃工作。对我来说

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

在jsfiddle上完美运作 - fiddle

我假设你的包含内容有些错误。控制台是否会抛出任何错误？

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

2 个答案: