bootstrap菜单不再关闭，当再次点击菜单按钮时

问题描述：

我正在使用bootstrap 3，并且在一个小设备上，汉堡包图标按预期显示。bootstrap菜单不再关闭，当再次点击菜单按钮时

如果我点击菜单图标，出现移动菜单。到现在为止还挺好。

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

我还必须包括一些自定义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'); 
    } 
});

请问您可以使用http://www.bootply.com/或类似的 – Stavm

答

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

添加一个链接到一个工作示例奇怪的是（不要问我这是怎么发生的），但我包括那两次。删除了一个条目，然后开始完美地工作。谢谢 – Nick

答

如果你使用引导的javascript，没有必要添加自定义代码可言，崩溃工作。对我来说，

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

完美的作品上的jsfiddle - fiddle 。

我假设你有一些错误，包括你的东西。控制台是否会抛出任何错误？

bootstrap菜单不再关闭，当再次点击菜单按钮时

相关推荐