Bootstrap 3 带有子菜单的下拉菜单

Question

下面显示的 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: "";浮动：对；
右边距：-10px； } @media（最小宽度：768px）{ .dropdown-submenu { 位置：相对； } .dropdown-submenu .dropdown-menu { 顶部：0； 左：100%； 边距顶部：-6px； 边框左上角半径：0； .dropup .dropdown-submenu .dropdown-menu, .navbar-fixed-bottom .dropdown-submenu 。下拉式菜单 { 顶部：自动； 底部：0； 边距顶部：0； 边距底部：-6px； 边框左上角半径：4px； 边界左下角半径：0； } .dropdown-menu-right .dropdown-submenu .dropdown-menu { 左：自动； 正确：100%； 边框左上角半径：4px； 边框右上角半径：0； .dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu, .navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu { 边框半径：4px 4px 0； } .dropdown-submenu > a:after { 边距顶部：6px； 左边框：4px 虚线； 边框顶部：4px 纯透明； 边框底部：4px 纯透明； } .dropdown-menu-right .dropdown-submenu > a:after { 向左飘浮; 左边框：无； 左边距：-10px； 右边距：0； 右边框：4px 虚线； 边框顶部：4px 纯透明； 边框底部：4px 纯透明； } } @media（最大宽度：767px）{ .dropdown-submenu .dropdown-menu { 位置：静态； 边距顶部：0； 边框：0； 盒子阴影：无； } .dropdown-submenu > a:after { 边距顶部：8px； 边框顶部：4px 虚线； 左边框：4px 纯透明； 右边框：4px 纯透明； } .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 > a、.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu

李>一个{ 左边距：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-submenu > .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-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 { 左边距：50px； .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header, .dropup > .dropdown-menu > .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 > a, .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 { 填充左：60px； } .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header, .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a { 填充左：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 { 填充左：45px； .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header, .navbar-nav > .下拉菜单 > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a { 填充左：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 { 填充左：65px； } }

jQuery

'使用严格';

(function(factory) { if (typeof define == 'function' && define.amd) { // AMD。注册为匿名模块 定义（['jquery']，工厂）； } else if (typeof exports == 'object') { // 节点/CommonJS module.exports = factory(require('jquery')); } 别的 { // 浏览器全局变量 工厂（jQuery）； } })(function($) { var desc = ':not(.disabled, .divider, .dropdown-header)';

函数子菜单选择器（元素）{ this.$element = $(element); this.$main = this.$element.closest('.dropdown, .dropup, .btn-group'); this.$menu = this.$element.parent(); this.$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 = { 初始化：函数（）{ this.$element.on('click.bs.dropdown', this.click.bind(this)); this.$element.keydown(this.keydown.bind(this)); this.$menu.on('hide.bs.submenu', this.hide.bind(this)); this.$items.keydown(this.item_keydown.bind(this));

  // 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/返回 （$.fn.submenupicker = 功能（元素）{ var $elements = this instanceof $ ?这：$（元素）；

return $elements.each(function() {
  var data = $.data(this, 'bs.submenu');

  if (!data) {
    data = new Submenupicker(this);

    $.data(this, 'bs.submenu', data);
  }
});   }); });

Answer 1

找出问题所在。我没能把脚本放进去。这是以防万一有人想试试这个。

$('.dropdown-submenu > a').submenupicker();