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

【问题标题】：bootstrap menu not closing when clicking again on menu button再次单击菜单按钮时引导菜单未关闭
【发布时间】：2016-12-25 14:35:34
【问题描述】：

我正在使用 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');
  }
});

【问题讨论】：

能否请您使用bootply.com 或类似方法添加指向工作示例的链接

标签： jquery twitter-bootstrap

【解决方案1】：

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

【讨论】：

奇怪的是（不要问我这是怎么发生的），但我两次都包括在内。删除了一个条目，然后开始完美工作。谢谢
旧答案，但在 2021 年仍有帮助！

【解决方案2】：

如果您使用的是引导程序的 javascript，则根本无需添加自定义代码即可让折叠工作。对我来说

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

在 jsfiddle 上完美运行 - fiddle .

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

【讨论】：