如何在jQuery Mobile导航栏中添加/删除元素？

Question

在jQuery Mobile中,假设我有以下导航栏:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item2">Item 2</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

然后,我可以使用jQuery删除项目,使其看起来像:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

但是,jQuery Mobile仍然将它呈现为好像有三个选项卡,而在中间选项卡中,没有任何内容.因此,不是每个标签间隔宽度的1/2,而是两个剩余标签中的每一个仅占宽度的1/3.

我仔细看了看和jQuery Mobile的自动添加一个类的<ul>所谓"UI网-B"元素,如果我改变手动"UI并网一个"随后看起来很好,两个标签占据整个宽度.但是,手动更改这些类似乎过于苛刻,我猜测有更好的方法.有任何想法吗？

Answer 1

我没有找到一个很好的解决方案，但我至少找到了一个不那么棘手的解决方案。

对于我的问题，我至少提前知道我想要在导航栏中包含的所有元素，因此我可以简单地构造几组导航栏并根据某些情况打开或关闭它们。因此，HTML 看起来像 phil 的解决方案，但他的解决方案的 JS 看起来像：

$('#navbar1').hide();
$('#navbar2').show();
$('#page1').page();