Bootstrap 3 Drop Up Menu with sub

 

The html, css and javascript shown below is working flawlessly with Bootstrap 3.3.4 using jquery 1.9.1.js. When it's placed in a page running Bootstrap 3.0.0 using query 1.10.2.js, the menu opens, but when the item with sub-menus is clicked the menu collapses. Any suggestions? Thanks.

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"> Menu

  • Action
    • Another action Dropdown header
  • Sub action
    • Another sub action
  • Something else here
  • Something else here
  • Separated link

    • 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; left: 100%; margin-top: -6px; border-top-left-radius: 0; } .dropup .dropdown-submenu .dropdown-menu, .navbar-fixed-bottom .dropdown-submenu .dropdown-menu { top: auto; bottom: 0; margin-top: 0; margin-bottom: -6px; border-top-left-radius: 4px; border-bottom-left-radius: 0; } .dropdown-menu-right .dropdown-submenu .dropdown-menu { left: auto; right: 100%; border-top-left-radius: 4px; border-top-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:after { margin-top: 6px; border-left: 4px dashed; border-top: 4px solid transparent; 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 dashed; border-top: 4px solid transparent; 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:after { margin-top: 8px; border-top: 4px dashed; 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 > a, .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-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 { padding-left: 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 { 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-left: 65px; } }

    jQuery

    'use strict';

    (function(factory) { if (typeof define == 'function' && define.amd) { // AMD. Register as an anonymous module define(['jquery'], factory); } else if (typeof exports == 'object') { // Node/CommonJS module.exports = factory(require('jquery')); } else { // Browser globals factory(jQuery); } })(function($) { var desc = ':not(.disabled, .divider, .dropdown-header)';

    function Submenupicker(element) { 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 = { init: function() { 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();
}   };

    // For AMD/Node/CommonJS used elements (optional) // http://learn.jquery.com/jquery-ui/environments/amd/ return ($.fn.submenupicker = function(elements) { var $elements = this instanceof $ ? this : $(elements); 

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

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

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

    Figured out what was wrong. I'd failed to put the script in. Here it is in case anyone wants to try this.

    $('.dropdown-submenu > a').submenupicker(); 链接地址: http://www.djcxy.com/p/83674.html

    上一篇: 导航栏覆盖背景颜色和图像

    下一篇: 引导3下拉菜单与子