メニューボタンを再度クリックしたときにブートストラップメニューが閉じない

Question

ブートストラップ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

あなたは、ブートストラップのJavaScriptを使用している場合に、まったくのカスタムコードを追加する必要はありません働くために崩壊する。 fiddle - 私にとって

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

はjsfiddleに完璧に動作します。

私はあなたとの多少の誤差はものを含める必要がありと仮定しています。コンソールが何らかのエラーを投げていますか？