帶有嵌套菜單/多級菜單的JQuery Mobile滑動面板

Question

我一直在我的jquery移動設備上從事多級菜單或子菜單的工作，一般來說，第3部分jquery插件已經使我的CSS與position:fixed footer和scrolling有關。

我在這里查看了插件 ，幾乎所有插件對我來說都很復雜。 我希望可以使用現有的jQuery移動框架中的一些魔術來重新創建此示例 ，如下所示

Answer 1

左側面板和子菜單：

這是一個快速的解決方案，僅供您參考。 它有很大的改進空間，因此只要進行任何更改，我都將更新此答案。

根據需要創建子菜單，每個子菜單都有一個唯一的ID和一個帶有class的關閉按鈕。 將子菜單放在jQM主面板內。

1. 子菜單HTML結構

    <div class='ui-sub-panel' id='submenu1'> <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a> <h1 class='ui-title'>Submenu1</h1> </div> <div class="ui-content"> <!-- submenu contents here --> </div> </div> 

2. CSS

   • 全高，全寬並位於外部頁面。

      .ui-sub-panel { width: 100%; position: absolute; top: 0; left: -100%; min-height: 100%; max-height: none; } 

   • 打開子菜單

      .ui-sub-panel-open { -moz-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 

   • 關閉子菜單

      .ui-sub-panel-close{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 

   • 動畫關閉/打開

      .ui-sub-panel-animate { -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; transition: transform 500ms ease; } 

3. JS

   • 關閉主jQM面板后，關閉所有子菜單

      $("#externalpanel").on("panelbeforeclose", function () { $('#submenu1, #submenu2') .addClass('ui-sub-panel-close ui-sub-panel-animate') .removeClass("ui-sub-panel-open"); }); 

   • 打開第一個子菜單

      $('.sub1').on('click', function () { $('#submenu1') .addClass('ui-sub-panel-open ui-sub-panel-animate') .removeClass("ui-sub-panel-close"); }); 

   • 打開第二個子菜單

      $('.sub2').on('click', function () { $('#submenu2') .addClass('ui-sub-panel-open ui-sub-panel-animate') .removeClass("ui-sub-panel-close"); }); 

   • 單擊關閉按鈕的“關閉”子菜單

      $('.panel-close').on('click', function () { $(this) .closest(".ui-sub-panel") .addClass('ui-sub-panel-close ui-sub-panel-animate') .removeClass("ui-sub-panel-open"); }); 

示范 ^（1）

---

更新1

右側面板和子菜單：

要將面板放置在右側，請在面板div中添加data-position="right"屬性。 同樣，在.ui-sub-panel類中， left right更改。

.ui-sub-panel {
   ...
   right: -100%;
   ...
}

示范 ^（1）

---

^{（1）在Safari上測試-iPhone 5 iOS 7.0.6和iPad 2 iOS 7.1}