动态调整jQuery Mobile导航栏：响应式与应用状态管理

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="mainNavbar">
            <li><a href="#" class="footerNavbar" data-icon="back">返回</a></li>
            <li id="itemA"><a href="#" class="footerNavbar" data-icon="check">选项A</a></li>
            <li id="itemB"><a href="#" class="footerNavbar" data-icon="check">选项B</a></li>
            <li id="itemC"><a href="#" class="footerNavbar" data-icon="forbidden">禁止</a></li>
            <li id="itemD"><a href="#" class="footerNavbar" data-icon="delete">删除</a></li>
        </ul>
    </div>
</div>

// 定义媒体查询
var mediaQuery = window.matchMedia("(max-width: 767px)");

// 定义处理媒体查询变化的函数
function handleNavbarVisibility(mq) {
    var $itemA = $("#itemA");
    var $itemB = $("#itemB");
    var $itemC = $("#itemC");
    var $mainNavbar = $("#mainNavbar");

    if (mq.matches) {
        // 屏幕宽度小于768px
        console.log("Small screen: Hiding itemA, itemB, itemC");
        $itemA.hide();
        $itemB.hide();
        $itemC.hide();
    } else {
        // 屏幕宽度大于等于768px
        console.log("Large screen: Showing itemA, itemB, itemC");
        $itemA.show();
        $itemB.show();
        $itemC.show();
    }

    // 重要的：当导航栏内容（li元素）增减或显示状态改变时，
    // 需要刷新jQuery Mobile的navbar widget，以确保样式正确渲染。
    // 注意：jQuery Mobile 1.4+ 版本可能需要对父级 navbar 容器调用 refresh
    // 如果直接操作li的显示/隐藏，jQuery Mobile可能不会自动重绘。
    // 在某些场景下，直接操作 li 的 display 属性可能不破坏布局，
    // 但如果布局错乱，可以尝试刷新其父级 data-role="navbar" 容器。
    // 例如：$('[data-role="navbar"]').navbar('refresh');
    // 但更推荐的做法是使用CSS媒体查询控制显示，或在JS中直接修改类名而非display属性。
}

// 首次加载时调用函数
handleNavbarVisibility(mediaQuery);

// 添加监听器，以便在媒体查询状态变化时再次调用函数
mediaQuery.addListener(handleNavbarVisibility);

// 确保在DOM加载完成后执行
$(document).on("mobileinit", function() {
    // jQuery Mobile 初始化前执行
}).on("pagecreate", function() {
    // 页面创建时执行
    // 确保在导航栏元素存在时执行上述逻辑
    handleNavbarVisibility(mediaQuery);
    mediaQuery.addListener(handleNavbarVisibility);
});

function updateNavbarByAppState(appState) {
    var $itemA = $("#itemA");
    var $itemB = $("#itemB");
    var $itemC = $("#itemC");
    var $itemD = $("#itemD");
    var $mainNavbar = $("#mainNavbar"); // 获取ul元素

    // 隐藏所有可能受影响的项，再根据状态显示
    $itemA.hide();
    $itemB.hide();
    $itemC.hide();
    $itemD.hide();

    if (appState === 'loggedIn') {
        // 用户已登录状态：显示A和D
        $itemA.show();
        $itemD.show();
    } else if (appState === 'guest') {
        // 访客状态：显示B和C
        $itemB.show();
        $itemC.show();
    } else if (appState === 'admin') {
        // 管理员状态：显示所有
        $itemA.show();
        $itemB.show();
        $itemC.show();
        $itemD.show();
    }

    // 关键：在jQuery Mobile中，当动态改变导航栏的<li>元素的显示状态后，
    // 需要调用其父级 data-role="navbar" 容器的 refresh 方法来重新渲染和布局。
    // 如果直接操作 li 元素的 display 属性，jQuery Mobile 的布局可能不会自动更新。
    // 刷新整个navbar widget以确保其正确显示。
    // 找到包含该 ul 的 data-role="navbar" 元素，并调用 refresh。
    $mainNavbar.closest('[data-role="navbar"]').navbar('refresh');
}

// 模拟应用状态变化
var currentAppState = 'loggedIn';
updateNavbarByAppState(currentAppState);

// 假设某个操作后状态变为 'guest'
// currentAppState = 'guest';
// updateNavbarByAppState(currentAppState);

/* 默认样式：所有导航项都可见 */
#itemA, #itemB, #itemC {
    display: block; /* 或 inline-block，取决于原始布局 */
}

/* 当屏幕宽度小于768px时应用 */
@media (max-width: 767px) {
    #itemA, #itemB, #itemC {
        display: none !important; /* 使用 !important 确保覆盖jQuery Mobile的默认样式 */
    }
}