Question

美好的一天，

我遇到了一个Jquery Mobile可折叠集的问题，我将其用作简单的菜单。普通的用户交互很好，但是当客户端在某些页面上时，我想扩展包含他们选择的菜单选项的部分。

我的问题是，在我执行此帖子底部的JavaScript函数后，菜单没有折叠/折叠到正确的状态（图像2 ）。我在该函数中放置了alert（'Foo'）语句，以验证它是否正确触发，并且该警报可以正常工作。所以我的菜单看起来像 Image 1 。

我必须提一下，如果我使用旧的F-5键刷新页面，菜单会正确地将状态更改为图像2 。它在IE，Chrome和Firefox中的功能完全相同。

我认为这是一个缓存问题，并尝试了各种方法触发菜单的所有部分，包括部门和页面的JQuery Mobile刷新，但无济于事。我还使用了很多方法来改变菜单的手风琴状态，同样没有结果。

我当然感谢你们所有人的建议。

此致，

Big Fat Mike

这是第一次加载页面时的外观示例（图片1 ）：

Main.png http://svfexpress.com/images/Main.png

这是我扩展Direct Ship然后选择DSS（ Image 2 ）时应该如何看待的示例：

Main.png http://svfexpress.com/images/DSS.png

使菜单的代码看起来像这样（请注意，我删除了一些锚以减少这本书的大小，但肉仍在那里）：

<div id="menuDiv">
  <div id="theMenu" data-role="collapsible-set">
    <div id="mainMenu" data-collapsed="false" data-role="collapsible">
      <h3>Menu</h3>
      <p>
        <a href="index.php" title="Home.">Home</a><br />
        <a href="Safety.php" title="Safety.">Safety</a><br />
      </p>
    </div>
    <div id="dssMenu" data-collapsed="true" data-role="collapsible">
      <h3>Direct Ship</h3>
      <p>
        <a href="EditDSS.php" title="Edit Direct Ship Schedule.">DSS</a> 
      </p>
    </div>
    <div id="systemMenu" data-collapsed="true" data-role="collapsible">
      <h3>System</h3>
      <p>
        <a href="EditUsers.php" title="Edit Users.">Users</a><br />
        <a href="EditCustomers.php" title="Edit Customers.">Customers</a> 
      </p>
    </div>
    <div id="adminMenu" data-collapsed="true" data-role="collapsible">
      <h3>Admin</h3>
      <p>
        <a href="ViewLogs.php" title="View System Log.">Logs</a><br />
        <a href="PHPInfo.php" title="phpinfo().">PHPInfo</a><br />
      </p>
    </div>
  </div>
</div>

我在页面完成加载后执行的JavaScript是：

function onBodyLoad_EditDirectShipSchedule()
{
  $("#mainMenu").collapsible({collapsed: true});
  $("#dssMenu").collapsible({collapsed: false});
}

值得注意的是，我使用的是onload =“onBodyLoad_EditDirectShipSchedule（） ;“＆gt;在BODY标记中调用上面的JavaScript。

Answer 1

您应该使用jQM页面事件而不是body onload来确保jQM在代码运行之前增强了collapsibleset：

$(document).on("pagecreate", "#page1", function(){
  $("#dssMenu").collapsible({collapsed: false});
});

由于collapsibleset确保一次只展开一个可折叠，您不需要折叠第一个折叠，只需展开所需的折叠。

当然，请将“＃page1”更改为您实际网页的ID。

Jquery Mobile可折叠设置不按需折叠

1 个答案: