簡體   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