Javascript 使用JQM（jquerymobile），为什么可折叠嵌套会间歇性地切换另一个可折叠标题？

特别奇怪的是，我没有使用JS来调整任何东西，只是调整HTML数据属性。原始标记：

<div id="navContainer">
    <div data-role="collapsible" data-iconpos="right" data-collapsed="true" data-theme="b">
        <h4>Go to a different page &raquo;</h4>
        <ul data-role="listview">

            <li class="current">
                <a href="http://m.brooksransom.com/about-us/" class="ui-btn ui-btn-a ui-btn-icon-right ui-icon-carat-r ui-btn-active">About Us</a>
            </li>

          ...

        </ul>
    </div>
</div>

我应该注意到，这是建立在SilverStripe之上的，SilverStripe是PHP MVC产品。它大量使用缓存来提高性能，有时清除缓存可以解决类似这样的奇怪问题。在这种情况下，我似乎没有这样做，但我想把我所有的牌都摆在桌面上。以下是JQM增强的标记：

<div id="navContainer">
    <div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
            <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
                <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
                    Go to a different page »
                    <span class="ui-collapsible-heading-status"> click to expand contents</span>
                </a>
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </a>
        </h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
    </div>
</div>

请注意额外的ui可折叠标题切换：

<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
    <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">

那是从哪里来的？为什么是间歇性的？有时页面将开始加载它，然后它将消失，标记将按其应有的方式结束。有时它会永久地停留在那里，事件变得一团糟，隐藏的内容也不会扩展。在原始标记中没有什么奇怪的东西会导致它。我很困惑

这是同一页-我刚刚刷新了它。现在请注意，标记和行为是完美的。内容是listview btw，与原始标记中的内容相同

<div id="navContainer">
    <div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
            <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
                Go to a different page »
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </a>
        </h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
    </div>
</div>

---

如果你愿意，你可以在现场查看。任何顶级链接有时都会表现出这种行为。有时，如果在半秒钟后修复了渲染错误。非常奇怪。

@ezanker看起来你的解决方案已经成功了。还有一个间歇性但很小的问题，我有一些悬而未决的地方，但我记得在以前的静态导航中，我使用的是数据ajax=false。至于jquery mobile被添加了两次，我想这就是Ilya Luzianin的意思，不是吗，我使用的是作为SilverStripe MVC框架一部分的整体移动解决方案。如果我在这方面做得不正确，请告诉我@ezanker的全部功劳。

好吧，这与加价无关。检查脚本添加部分，也许您多次添加jquery-ui.js？下面是您的代码，运行良好。一种解决方法可能是使用预呈现标记。请参阅本页底部：我现在将两者都签出。两者听起来都很有道理。我还要补充一点，你可以看到真实的东西@或任何顶级链接。当然，它在大屏幕上看起来很奇怪，它只在小屏幕上自动导航。不过对我来说，测试路线不错。我确实喜欢我的萤火虫。