Question

尝试使用JQuery Mobile（v 1.4.5）Panel小部件构建可折叠的多级菜单。我添加了一些slideUp / Down动画，使子菜单的打开更加明显。

<div data-role="page">

<div data-role="panel" id="mainmenu" role="navigation" data-display="overlay">
  <ul data-role="listview" class="ui-listview-outer">
    <li><a href="#">Home Page</a></li>
    <li data-role="collapsible" data-inset="false">
      <h3>LIST 1 OF 6</h3>
      <ul data-role="listview" data-theme="b">
        <li><a href="#">1.1</a></li>
        <li><a href="#">1.2</a></li>
        <li><a href="#">1.3</a></li>
        <!-- etc. -->
      </ul>
    </li>
    <li data-role="collapsible" data-inset="false">
      <h3>List 2 OF 6</h3>
      <ul data-role="listview" data-theme="c">
        <li role="menuitem"><a href="#">2.1</a></li>
        <li role="menuitem"><a href="#">2.2</a></li>
        <li role="menuitem"><a href="#">2.3</a></li>
        <!-- etc. -->
      </ul>
    </li>
    <li data-role="collapsible" data-inset="false">
      <h3>List 3 OF 6</h3>
      <ul data-role="listview">
        <li><a href="#">3.1</a></li>
        <li><a href="#">3.2</a></li>
        <li><a href="#">3.3</a></li>
        <!-- etc. -->
      </ul>
    </li>
    <li data-role="collapsible" data-inset="false">
      <h3>LIST 4 OF 6</h3>
      <ul data-role="listview">
        <li><a href="#">4.1</a></li>
        <li><a href="#">4.2</a></li>
        <li><a href="#">4.3</a></li>
        <!-- etc. -->
      </ul>
    </li>
    <li data-role="collapsible" data-inset="false">
      <h3>LIST 5 of 6</h3>
      <ul data-role="listview">
        <li><a href="#">5.1</a></li>
        <li><a href="#">5.2</a></li>
        <li><a href="#">5.3</a></li>
        <!-- etc. -->
      </ul>
    </li>
    <li data-role="collapsible" data-inset="false">
      <h3>LIST 6 OF 6</h3>
      <ul data-role="listview">
        <li><a href="#">6.1</a></li>
        <li><a href="#">6.2</a></li>
        <li><a href="#">6.3</a></li>
        <!-- etc. -->
      </ul>
      </li>
  </ul>
</div>

<div data-role="header" class="header">
<a href="#mainmenu" data-icon="bars" data-iconpos="notext">Menu</a><h1>This is the header
</h1>
</div>

<div data-role="content" class="content">
This is the content
<br>
<br>
<br>
<br>
<!-- <br>'s etc. to increase page length for illustrative purposes -->
</div>

<div data-role="footer" class="footer">
This is the footer
</div>

</div>

问题：当菜单的高度超过页面div的高度时（由于最顶层的子菜单很长，这很快发生），然后另一个子菜单进一步向下展开/折叠，视口跳跃使得页面底部位于视口底部，将新打开的子菜单推到视口下方，无疑会让用户感到困惑，直到发生了什么。

理想情况下，刚刚单击的子菜单保持在视图中，slideDown动画可见，用户可以理解子菜单已打开。 JQuery似乎是基于菜单高度动态地改变页面高度，这是有道理的，但是视口的突然移动......不那么重要。

无论是否有幻灯片动画，行为都会持续存在，如下所示：

$(document).ready(function () {

  $(document).on("collapsibleexpand", ".ui-collapsible", function (event) {
        var contentDiv = $(this).children(".ui-collapsible-content");
        contentDiv.hide();
        contentDiv.slideDown(300);
        event.stopPropagation(); // don't bubble up
    });

    $(document).on("collapsiblecollapse", ".ui-collapsible", function (event) {
        var contentDiv = $(this).children('.ui-collapsible-content');
        contentDiv.slideUp(300);
        event.stopPropagation(); // don't bubble up
    });
});

Working fiddle to show the issue

我远不是一个JQuery / JS / JQM专家，我可能会在这里做一些不推荐的事情（例如，我没有看到很多关于导航面板中的嵌套列表）。如果是这样，我很乐意听到它。

Answer 1

这是我对这种导航系统的建议。恕我直言，应该有两个可滚动的元素，页面内容和菜单子系统（侧面板）。

我无法完全理解你的句子＆＃34; ...视口跳跃，使得页面底部位于视口的底部＆＃34;但无论如何，我喜欢你对滑动子菜单的想法，所以我认为这里的难点是：如何计算将当前菜单项移到顶部所需的滚动量。

请注意，我并未在所有情况下测试过这段代码，但乍一看，它似乎没问题 - 至少在浏览器中是这样。

＆＃13;

$(document).ready(function() {
  $(document).on("collapsibleexpand", ".ui-collapsible", function(e) {
    var self = $(this), 
        menu = $("#mainmenu"),
        pageY = $(document).scrollTop(),
        content = $(this).children(".ui-collapsible-content");
    content.hide();
    content.slideDown({
        duration: 300,
        step: function(now, fx) {
          if (fx.prop == "height") {
            var pct = ((100 * now) / fx.end),
              itemTop = $(self).offset().top,
              menuScrollTop = $(menu).scrollTop(),
              amt = (itemTop - pageY) / 100 * pct;
            menu.scrollTop(menuScrollTop + amt);
          }
        }
      }
    );
    e.stopPropagation(); // don't bubble up
  });

  $(document).on("collapsiblecollapse", ".ui-collapsible", function(e) {
    var content = $(this).children('.ui-collapsible-content');
    content.slideUp(300);
    e.stopPropagation(); // don't bubble up
  });
});

＆＃13;

.content {
  text-align: center;
}

#mainmenu {
  position: fixed;
  overflow-y: scroll;
  height: 100%;
}

.ui-page-active {
  overflow-y: scroll;
  min-height: 100% !important;
}

li,
ul {
  padding: 0 !important;
}

h3 {
  margin: 0 !important;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="panel" id="mainmenu" role="navigation" data-display="overlay">
      <ul data-role="listview" class="ui-listview-outer">
        <li><a href="#">Home Page</a></li>
        <li data-role="collapsible" data-inset="false">
          <h3>LIST 1 OF 6</h3>
          <ul data-role="listview" data-theme="b">
            <li><a href="#">1.1</a></li>
            <li><a href="#">1.2</a></li>
            <li><a href="#">1.3</a></li>
            <li><a href="#">1.4</a></li>
            <li><a href="#">1.5</a></li>
            <li><a href="#">1.6</a></li>
            <li><a href="#">1.7</a></li>
            <li><a href="#">1.8</a></li>
            <li><a href="#">1.9</a></li>
            <li><a href="#">1.10</a></li>
            <li><a href="#">1.11</a></li>
            <li><a href="#">1.12</a></li>
            <li><a href="#">1.13</a></li>
            <li><a href="#">1.14</a></li>
            <li><a href="#">1.15</a></li>
            <li><a href="#">1.16</a></li>
            <li><a href="#">1.17</a></li>
            <li><a href="#">1.18</a></li>
            <li><a href="#">1.19</a></li>
            <li><a href="#">1.20</a></li>
            <li><a href="#">1.21</a></li>
            <li><a href="#">1.22</a></li>
            <li><a href="#">1.23</a></li>
            <li><a href="#">1.24</a></li>
            <li><a href="#">1.25</a></li>
            <li><a href="#">1.26</a></li>
            <li><a href="#">1.27</a></li>
            <li><a href="#">1.28</a></li>
            <li><a href="#">1.29</a></li>
          </ul>
        </li>
        <li data-role="collapsible" data-inset="false">
          <h3>List 2 OF 6</h3>
          <ul data-role="listview" data-theme="c">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
            <li><a href="#">2.4</a></li>
            <li><a href="#">2.5</a></li>
            <li><a href="#">2.6</a></li>
            <li><a href="#">2.7</a></li>
            <li><a href="#">2.8</a></li>
            <li><a href="#">2.9</a></li>
            <li><a href="#">2.10</a></li>
            <li><a href="#">2.11</a></li>
            <li><a href="#">2.12</a></li>
            <li><a href="#">2.13</a></li>
            <li><a href="#">2.14</a></li>
            <li><a href="#">2.15</a></li>
            <li><a href="#">2.16</a></li>
          </ul>
        </li>
        <li data-role="collapsible" data-inset="false">
          <h3>List 3 OF 6</h3>
          <ul data-role="listview">
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
            <li><a href="#">3.4</a></li>
            <li><a href="#">3.5</a></li>
            <li><a href="#">3.6</a></li>
            <li><a href="#">3.7</a></li>
          </ul>
        </li>
        <li data-role="collapsible" data-inset="false">
          <h3>LIST 4 OF 6</h3>
          <ul data-role="listview">
            <li><a href="#">4.1</a></li>
            <li><a href="#">4.2</a></li>
            <li><a href="#">4.3</a></li>
          </ul>
        </li>
        <li data-role="collapsible" data-inset="false">
          <h3>LIST 5 of 6</h3>
          <ul data-role="listview">
            <li><a href="#">5.1</a></li>
            <li><a href="#">5.2</a></li>
            <li><a href="#">5.3</a></li>
            <li><a href="#">5.4</a></li>
            <li><a href="#">5.5</a></li>
            <li><a href="#">5.6</a></li>
            <li><a href="#">5.7</a></li>
            <li><a href="#">5.8</a></li>
            <li><a href="#">5.9</a></li>
            <li><a href="#">5.10</a></li>
          </ul>
        </li>
        <li data-role="collapsible" data-inset="false">
          <h3>LIST 6 OF 6</h3>
          <ul data-role="listview">
            <li><a href="#">6.1</a></li>
            <li><a href="#">6.2</a></li>
            <li><a href="#">6.3</a></li>
            <li><a href="#">6.4</a></li>
            <li><a href="#">6.5</a></li>
            <li><a href="#">6.6</a></li>
            <li><a href="#">6.7</a></li>
            <li><a href="#">6.8</a></li>
            <li><a href="#">6.9</a></li>
            <li><a href="#">6.10</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div data-role="header" class="header">
      <a href="#mainmenu" data-icon="bars" data-iconpos="notext">Menu</a>
      <h1>This is the header</h1>
    </div>
    <div data-role="content" class="content">
      This is the content
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    <div data-role="footer" class="footer">
      <h1>This is the footer</h1>
    </div>
  </div>
</body>
</html>

＆＃13;

请在上面的所有可用设备上测试此方法并给我反馈。

JQuery Mobile Panel Widget - 打开可折叠列表会导致跳转到页面div的底部，一旦扩展到页面高度以外。为什么？

1 个答案: