我正在使用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