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'); 
    } 
});

來源

2016-12-25 Nick

請問您可以使用http://www.bootply.com/或類似的 – Stavm

確保您的代碼中沒有包含引導腳本兩次。

來源

2017-01-11 05:21:42

添加一個鏈接到一個工作示例奇怪的是（不要問我這是怎麼發生的），但我包括那兩次。刪除了一個條目，然後開始完美地工作。謝謝 – Nick

如果你使用引導的javascript，沒有必要添加自定義代碼可言，崩潰工作。對我來說，

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

完美的作品上的jsfiddle - fiddle 。

我假設你有一些錯誤，包括你的東西。控制檯是否會拋出任何錯誤？

來源

2016-12-25 15:22:28 Laurin

bootstrap菜單不再關閉，當再次點擊菜單按鈕時

回答

相關問題