jQuery Mobile中根据场景切换底部Navbar显示状态的问题

问题根源 #

直接用hide()/show()切换Navbar的<li>元素后，jQuery Mobile不会自动重新计算导航项的宽度分配，导致布局错乱；另外你的HTML存在文本位置错误（部分文本在<a>标签外），JS代码有语法错误（f应为if，条件标识未明确）。

步骤1：修正HTML结构 #

把导航项的文本放到<a>标签内部，避免布局错位：

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="abc">
            <li><a href="#" class="footerNavbar" data-icon="back" data-role="button" onclick="">a</a></li>
            <li id="a"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">b</a></li>
            <li id="b"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">c</a></li>
            <li id="c"><a href="#" class="footerNavbar" data-icon="forbidden" data-role="button" onclick="">d</a></li>
            <li id="d"><a href="#" class="footerNavbar" data-icon="delete" data-role="button" onclick="">e</a></li>
            <li id="e"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">f</a></li>
            <li id="f"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">g</a></li>
        </ul>
    </div>
</div>

步骤2：修正JS代码并添加Navbar刷新 #

修复语法错误，并且在切换显示后调用navbar("refresh")触发组件重新渲染，让剩余导航项自动均分宽度：

// 替换成实际的场景标识，比如'scene1'、'scene2'
if (variable == 'scene1') {
    $("#a").hide();
    $("#b").hide();

    $("#c").show();
    $("#d").show();
    $("#e").show();
    $("#f").show();
} else if (variable == 'scene2') {
    $("#a").hide();
    $("#b").hide();
    $("#c").hide();

    $("#d").show();
    $("#e").show();
    $("#f").show();
}
// 关键：刷新Navbar组件，重新计算布局
$("[data-role='navbar']").navbar("refresh");

额外优化建议 #

给不同场景的导航项分组标记class，批量隐藏/显示，代码更简洁：

if (variable == 'scene1') {
    $(".hide-in-scene1").hide();
    $(".show-in-scene1").show();
} else if (variable == 'scene2') {
    $(".hide-in-scene2").hide();
    $(".show-in-scene2").show();
}
$("[data-role='navbar']").navbar("refresh");

对应的HTML给<li>添加分组class：

<li id="a" class="hide-in-scene1 hide-in-scene2"><a href="#">b</a></li>
<li id="c" class="show-in-scene1 hide-in-scene2"><a href="#">d</a></li>

内容的提问来源于stack exchange，提问作者김완동