bootstrap metismenu里submenu菜单无法下拉，求助

来源：蜘蛛抓取(WebSpider) 时间：2017-03-23 02:01 标签： bootstrap submenu
您还可以使用以下方式登录
当前位置：&>&&>&&>& > Bootstrap CSS组件之下拉菜单(dropdown)
bootstrap下拉框组件 Bootstrap CSS组件之下拉菜单(dropdown)
Bootstrap下拉菜单，常用在开发项目中，今天为大家介绍介绍
dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu
例子见下拉菜单.html
.dropdown {
.dropdown-toggle:focus {
outline: 0;
.dropdown-menu {
top: 100%;
z-index: 1000;
min-width: 160
padding: 5px 0;
margin: 2px 0 0;
font-size: 14
text-align:
list-style:
background-color: #
-webkit-background-clip: padding-
background-clip: padding-
border: 1px solid #
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
.dropdown-menu.pull-right {
.dropdown-menu .divider {
margin: 9px 0;
background-color: #e5e5e5;
.dropdown-header {
padding: 3px 20
font-size: 12
line-height: 1.;
color: #777;
white-space:
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 --&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&Bootstrap 101 Template&/title&
&!-- Bootstrap --&
&link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"&
&div class="btn-group"&
&button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&
我的书籍&span class="caret"&&/span&
&ul class="dropdown-menu"&
&li&&a href="#"&编程&/a&&/li&
&li&&a href="#"&设计&/a&&/li&
&li&&a href="#"&深入&/a&&/li&
&!-- dropdown/dropdown-menu/dropdown-header --&
&div class="dropdown"&
&button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&
我的书籍&span class="caret"&&/span&
&ul class="dropdown-menu"&
&li class="dropdown-header"&前端&/a&&/li&
&li&&a href="#"&JS&/a&&/li&
&li&&a href="#"&HTML&/a&&/li&
&li&&a href="#"&CSS&/a&&/li&
&li class="divider"&&/li&
&li class="dropdown-header"&后台&/li&
&li&&a href="#"&PYTHON&/a&&/li&
&li&&a href="#"&JAVA&/a&&/li&
&!-- bootstrap是基于jQuery--&
&script src="/ajax/libs/jquery/1.12.4/jquery.min.js"&&/script&
&script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"&&/script&
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持就爱阅读。
欢迎转载：
推荐： 　　　解决Bootstrap下拉菜单不可点击 - 菜单 - MoMo
&nbsp> &nbsp&nbsp> &nbsp&nbsp> &nbsp
4421 次浏览
使用Bootstrap菜单组件时，如果你的菜单带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，如果希望菜单栏的链接可以正常打开，该怎么做呢。
在主题的js文件中加入如下代码即可：
$(document).on(&click&,&.dropdown-toggle&,function(){
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
以上代码的意思是，点击菜单选项时，如果当前选项具有“href”属性，那么点击它时页面跳转至href属性所链接的页面。
可如果我们的主题是响应式主题，在手机端浏览的时候，我们希望点击菜单时不跳转，而是bootstrap默认的行为（出现下拉菜单），该如何操作呢？只要在上面的js代码中加上一个判断语句即可：
$(document).on(&click&,&.dropdown-toggle&,function(){
if( $(window).width() & 767 )
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
以上代码的意思是，在设备宽度超过767像素的时候，点击菜单才会跳转，而小于等于767像素时并不执行语句。

我要回帖

更多关于 bootstrap submenu 的文章

 

随机推荐