0

我正在为我的应用程序使用温泉 ui 滑动菜单，这是我用于滑动菜单的代码： 

<ons-sliding-menu main-page="frontPage.html" menu-page="menu.html"  max-slide-distance="260px" type="overlay" var="menu">
</ons-sliding-menu>

但与所有 html 都在<ons-template>标记中的原始模板不同，我为主页 (frontpage.html) 创建了一个单独的 HTML 文件，并将仅包含 menu.html 模板的页面重命名为 index.html。

在 frontpage.html 上，我使用 jquery 代码显示手风琴，当我在浏览器中打开 html 页面时它工作正常，但是当我打开 index.html 文件时，除了 jquery 手风琴外，一切正常。手风琴中的所有选项卡都是预先打开的，手风琴不起作用。我也没有在控制台中收到任何错误。

我正在使用本地托管的 jquery v2.2.3。两个 html 文件都包含正确的 jquery 脚本（在浏览器视图源中检查）。

我已经尝试了这两种方法，包括直接在脚本标记下的 frontpage.html 中的代码，并将其包含在单独的 js 文件中。当页面直接在浏览器中加载时它工作正常，但当页面通过滑动菜单页面加载时它不起作用。

4

1 回答 1

0

我并不是要粗鲁，但由于手风琴似乎不起作用，那么该代码可能对您的问题有用作为参考。

为什么它可能不起作用有几个可能的原因：

  1. 代码只是没有做你想做的事。
  2. 代码没有被执行。
  3. 代码在不正确的时间执行。
  4. 不知何故，温泉干扰了执行或事后将其重置。

我们可以勾选 1，因为您说它在其他情况下也有效。要检查 2 你只需要一个console.log，我猜你已经这样做了。

您说您尝试移动脚本，所以我猜您也在怀疑选项 3。它是否在单独的文件中并不是很重要。然而，什么时候执行才是最重要的。例如，您frontpage.html是一个带有 , 等的页面html。head前段时间body人们将脚本放在正文的末尾，以便在页面加载后执行它们。当 jQuery 成为主流时，尽管它是使用$(function(){ ... })or 或$(document).ready(function(){ ... }). 我猜你正在使用其中之一。

但是，这些将有助于确保DOMContentLoaded事件已经被触发。在您的情况下，因为您已经加载了包含 的页面，sliding-menu这意味着此时主页已经加载。您说您查看了 DOM 树 - 如果您查看的是 usinginspect element而不是show source您可能会看到内页不在框架或 iframe 内。因此，它们只是作为随机 html 内容放入页面中，而不是作为单独的 html 页面。所以基本上当$(readyFunction)从浏览器的角度来看，页面已经加载完毕。如果该代码在实际手风琴之前，那么这意味着它可以在此之前执行。关于错误 - jQuery 和它的插件并不是错误的字体。由于 jQuery 的选择能够匹配任何数量的元素，包括 0。所以即使你做了类似的事情

$('#accordion').activateAccordion();

这很好，因为即使它找到 0 个元素，它也只适用于这组 0 个元素并激活它们中的每一个。:D

如果发生这种情况，您可以通过 console.logging 匹配元素的数量对其进行调试。您可以通过将脚本移动到正文的末尾，甚至将其包含在主页中来修复它。Onsen 的工作方式是它不需要实际的 html 页面来存储它的sliding-menu和类似的组件。您可以只拥有内容所需的 html。ons-template（如果您想在一个文件中添加多个子页面，还有一个组件可以提供帮助。）

无论如何，如果您决定采用单页方法，那么您可以使用init触发页面的事件。否则，您可以在内容之后使用您的脚本。

老实说，我认为选项 3 是最有可能的选项。

但是，如果您发现您的 jQuery 选择器找到了您的手风琴元素并执行了它需要的操作，那么您应该再次检查使用 some console.logs 之后会发生什么。

我希望我能有所帮助。祝你的应用好运！

于 2016-04-28T12:03:02.430 回答