如何在 bootstrap 上制作切换菜单?
How to make toggle menu on bootstrap?
大家好,我是 bootstrap 的新手。我遇到切换菜单的问题,当我将浏览器缩放到小尺寸时它显示菜单但是当我单击切换菜单时它不显示菜单我怎么能做吗?
这是我的代码:
<script type="text/javascript">
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
</script>
<nav id="nav-menu" style="clear:both" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="hi" class="navbar-brand" href="<?php echo base_url().'./site/index' ?>">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="nav-menu-hi" class="nav navbar-nav">
<li class="<?php if($this->uri->segment(2)=='burger'){echo "active";} ?>"><a href="<?php echo base_url().'./site/burger' ?>">Menu</a></li>
<li class="<?php if($this->uri->segment(2)=='promotion'){echo "active";} ?>"><a href="<?php echo base_url().'./site/promotion' ?>">Promotion</a></li>
<li class="<?php if($this->uri->segment(2)=='events'){echo "active";} ?>"><a href="<?php echo base_url().'./site/events' ?>">Events</a></li>
<li class="<?php if($this->uri->segment(2)=='contact'){echo "active";} ?>"><a href="<?php echo base_url().'./site/contact' ?>">Contact</a></li>
<li class="<?php if($this->uri->segment(2)=='about'){echo "active";} ?>"><a href="<?php echo base_url().'./site/about' ?>">About Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
您检查控制台是否有错误?你在哪里添加jQuery?如果它在页脚中,您应该在它之后添加您的脚本。
大家好,我是 bootstrap 的新手。我遇到切换菜单的问题,当我将浏览器缩放到小尺寸时它显示菜单但是当我单击切换菜单时它不显示菜单我怎么能做吗?
这是我的代码:
<script type="text/javascript">
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
</script>
<nav id="nav-menu" style="clear:both" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="hi" class="navbar-brand" href="<?php echo base_url().'./site/index' ?>">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="nav-menu-hi" class="nav navbar-nav">
<li class="<?php if($this->uri->segment(2)=='burger'){echo "active";} ?>"><a href="<?php echo base_url().'./site/burger' ?>">Menu</a></li>
<li class="<?php if($this->uri->segment(2)=='promotion'){echo "active";} ?>"><a href="<?php echo base_url().'./site/promotion' ?>">Promotion</a></li>
<li class="<?php if($this->uri->segment(2)=='events'){echo "active";} ?>"><a href="<?php echo base_url().'./site/events' ?>">Events</a></li>
<li class="<?php if($this->uri->segment(2)=='contact'){echo "active";} ?>"><a href="<?php echo base_url().'./site/contact' ?>">Contact</a></li>
<li class="<?php if($this->uri->segment(2)=='about'){echo "active";} ?>"><a href="<?php echo base_url().'./site/about' ?>">About Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
您检查控制台是否有错误?你在哪里添加jQuery?如果它在页脚中,您应该在它之后添加您的脚本。