引导3下拉菜单与子
下面显示的html，css和javascript与使用jquery 1.9.1.js的Bootstrap 3.3.4完美结合。 当它被放置在使用查询1.10.2.js的运行Bootstrap 3.0.0的页面中时，菜单将打开，但当带有子菜单的项目被单击时，菜单将折叠。 有什么建议么？ 谢谢。
HTML
<div class="col-sm-4"> <h3 class="header-title">Navigation</h3>
<span class="line"></span> <div class="dropup m-b"> <button
class =“btn btn-success”type =“button”data-toggle =“dropdown”>菜单
CSS
.dropdown-submenu> a：after {content：“”; float：right;
margin-right：-10px; } @media（min-width：768px）{.dropdown-submenu {position：relative; } .dropdown-submenu .dropdown-menu {top：0; 左：100％; margin-top：-6px; 边界顶部左半径：0; } .dropup .dropdown-submenu .dropdown-menu，.navbar-fixed-bottom .dropdown-submenu .dropdown-menu {top：auto; 底部：0; margin-top：0; margin-bottom：-6px; border-left-left-radius：4px; border-bottom-left-radius：0; } .dropdown-menu-right .dropdown-submenu .dropdown-menu {left：auto; 对：100％; border-left-left-radius：4px; border-right-right-radius：0; } .dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu，.navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu {border-radius：4px 4px 0; } .dropdown-submenu> a：在{margin-top：6px; border-left：4px虚线; 边框顶部：4px实心透明; border-bottom：4px solid transparent; } .dropdown-menu-right .dropdown-submenu> a：after {float：left; border-left：none; margin-left：-10px; margin-right：0; border-right：4px虚线; 边框顶部：4px实心透明; border-bottom：4px solid transparent; }} @media（max-width：767px）{.dropdown-submenu .dropdown-menu {position：static;}} margin-top：0; border：0; box-shadow：none; } .dropdown-submenu> a：在{margin-top：8px; border-top：4px虚线; border-left：4px solid transparent; border-right：4px solid transparent; } .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li.dropdown-header，.dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li.dropdown-header ,. btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li.dropdown-header，.dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> a，
.dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu
li> a {padding-left：30px; } .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，
.btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li .dropdown-menu> li.dropdown-header，.dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> a，
.dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> a，.btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li > .dropdown-menu> li> a {padding-left：40px; } .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.dropup> .dropdown-menu> .dropdown-子菜单> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li>。下拉菜单> li> .dropdown-menu> li.dropdown-header，.dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li > a，.dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a，.btn-group> .dropdown-menu>。 dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a {padding-left：50px; } .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.dropup>。下拉菜单> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.btn-group> .dropdown-menu > .dropdown-submenu .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropup> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a，
.btn-group> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a {padding-left：60px; } .navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li.dropdown-header，.navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown -menu> li> a {padding-left：35px; } .navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> a {padding-left：45px; } .navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header，.navbar-nav>。 dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a {padding-left：55px; } .navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li.dropdown-header ，
.navbar-nav> .dropdown> .dropdown-menu> .dropdown-submenu> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> .dropdown-menu> li> a {padding-左：65px; }}
jQuery的
'严格使用';
（函数（工厂）{if（typeof define =='function'&& define.amd）{// AMD。注册为匿名模块define（['jquery']，factory）;} else if（typeof exports =='对象'）{// Node / CommonJS module.exports = factory（require（'jquery'））;} else {//浏览器全局工厂（jQuery）;}}）（function（$）{var desc ='：not （.disabled，.divider，.dropdown-header）';
函数Submenupicker（element）{this。$ element = $（element）; this。$ main = this。$ element.closest（'。dropdown，.dropup，.btn-group'）; 这个。$ menu = this。$ element.parent（）; 这个。$ drop = this。$ menu.parent（）。parent（）; this。$ menus = this。$ menu.siblings（'。dropdown-submenu'）;
var $children = this.$menu.find('> .dropdown-menu > ' + desc);
this.$submenus = $children.filter('.dropdown-submenu');
this.$items = $children.not('.dropdown-submenu');
this.init(); }
Submenupicker.prototype = {init：function（）{this。$ element.on（'click.bs.dropdown'，this.click.bind（this））; 这$ element.keydown（this.keydown.bind（本））; 这个。$ menu.on（'hide.bs.submenu'，this.hide.bind（this））; 这$ items.keydown（this.item_keydown.bind（本））;
// Bootstrap fix
this.$menu.nextAll(desc + ':first:not(.dropdown-submenu)').children('a').keydown(this.next_keydown.bind(this));
},
click: function(event) {
event.stopPropagation();
this.toggle();
},
toggle: function() {
if (this.$menu.hasClass('open')) {
this.close();
}
else {
this.$menu.addClass('open');
this.$menus.trigger('hide.bs.submenu');
}
},
hide: function(event) {
// Stop event bubbling
event.stopPropagation();
this.close();
},
close: function() {
this.$menu.removeClass('open');
this.$submenus.trigger('hide.bs.submenu');
},
keydown: function(event) {
// 13: Return, 27: Esc, 32: Spacebar
// 38: Arrow up, 40: Arrow down
// Off vertical scrolling
if (/^(32|38|40)$/.test(event.keyCode)) {
event.preventDefault();
}
if (/^(13|32)$/.test(event.keyCode)) {
this.toggle();
}
else if (/^(27|38|40)$/.test(event.keyCode)) {
event.stopPropagation();
if (event.keyCode == 27) {
if (this.$menu.hasClass('open')) {
this.close();
}
else {
this.$menus.trigger('hide.bs.submenu');
this.$drop.removeClass('open').children('a').focus();
}
}
else {
var $items = this.$main.find('li:not(.disabled):visible > a');
var index = $items.index(event.target);
if (event.keyCode == 38 && index !== 0) {
index--;
}
else if (event.keyCode == 40 && index !== $items.length - 1) {
index++;
}
else {
return;
}
$items.eq(index).focus();
}
}
},
item_keydown: function(event) {
// 27: Esc
if (event.keyCode != 27) {
return;
}
event.stopPropagation();
this.close();
this.$element.focus();
},
next_keydown: function(event) {
// 38: Arrow up
if (event.keyCode != 38) {
return;
}
// Off vertical scrolling
event.preventDefault();
event.stopPropagation();
// Use this.$drop instead this.$main (optimally)
var $items = this.$drop.find('li:not(.disabled):visible > a');
var index = $items.index(event.target);
$items.eq(index - 1).focus();
} };
//对于AMD / Node / CommonJS使用的元素（可选）// http://learn.jquery.com/jquery-ui/environments/amd/ return（$ .fn.submenupicker = function（elements）{var $ elements =这个$？this的实例：$（elements）;
return $elements.each(function() {
var data = $.data(this, 'bs.submenu');
if (!data) {
data = new Submenupicker(this);
$.data(this, 'bs.submenu', data);
}
}); }); });
找出什么是错的。 我没有把脚本放进去。在这种情况下，任何人都想试试这个。
$（'。dropdown-submenu> a'）。submenupicker（）; 链接地址: http://www.djcxy.com/p/83673.html