繁体   English   中英

Bootstrap 3 多级下拉菜单在移动设备中不起作用

[英]Bootstrap 3 multi level dropdown menu not working in mobile

Bootstrap 3 多级下拉菜单不适用于移动设备。 我在 StackOverflow 中检查了许多解决方案。 该解决方案适用于桌面而非移动设备。 以下是多标签下拉菜单的最佳解决方案。

Bootstrap 3 下拉子菜单丢失

https://github.com/djokodonev/bootstrap-multilevel-dropdown

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

上面的代码适用于桌面。

现场示例: http : //rahulmoral.com/portfolio/essanet/

请在移动设备上查看。 二级下拉菜单不适用于移动设备。

它实际上工作得很好。 您需要滚动才能看到展开的菜单。 但是,要让它按照您的意愿工作,只需覆盖max-height

.navbar-collapse {
    max-height: none;
}

我通过将它添加到我的 css 来让它工作

@media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
    max-height:100%;
} }

但您也可以不使用 100%。 我使用的是固定导航,这就是为什么我将导航栏固定在顶部。 您可以将其更改为静态或我们正在使用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM