bootstrap多级下拉列表

时间:2015-09-15 21:18:49

标签: html twitter-bootstrap

这是下拉菜单中的jsfiddle。如果您点击任何链接,它实际上会将您带到我正在处理的主页面。如果您尝试点击人工操作下的子菜单,则不会出现任何问题。

请帮忙,我不明白为什么没有生成子菜单。非常感谢。

Here is the fiddle: http://jsfiddle.net/maxgitt/a9vq8v9p/

以下是在人类实践中创建子菜单问题的直接链接:http://2015.igem.org/Template:Michigan

1 个答案:

答案 0 :(得分:1)

这可能会帮助您或给您一些想法,JS是这样您的子菜单将在Click后打开并保持打开状态。

您不必将打开的子菜单直接保留在其父级下方,但如果您不小心放置视口,则在视口缩小后您会发现子菜单会离开页面。如果您愿意,Symbol Name Last Trade Type Industry/Category Exchange ING.PA Ingenico Group 101.45 Stock Business Services PAR ING.SW INGENICO GROUP 116.30 Stock EBS IIE.F INGENICO GROUP 100.90 Stock Business Services FRA IIE.SG INGENICO GROUP 102.88 Stock Business Services STU INGIY Ingenico Group 23.05 Stock PNK INGNV.PA Ingenico S.A. 98.33 Stock PAR IIEF.EX INGENICO GROUP 115.49 Stock EUX IIE.BE INGENICO GROUP 106.70 Stock Business Services BER 中注释掉的CSS规则将有助于重新定位子菜单。

.dropdown-submenu > .dropdown-menu
(function($) {
  $(document).ready(function() {
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
  });
})(jQuery);
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  /*top: 0;
    left: 15%;*/
  margin-top: 5px;
  margin-left: -1px;
}
.navbar .dropdown-submenu,
.navbar .dropdown-menu {
  border-radius: 0;
  box-shadow: none;
}