响应式设计实践：在jQuery Mobile中动态控制底部导航栏的显示

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="footerNavbarList">
            <!-- 默认或小屏时显示的导航项 -->
            <li class="nav-item small-screen-only"><a href="#" data-icon="home">首页</a></li>
            <li class="nav-item small-screen-only"><a href="#" data-icon="search">搜索</a></li>

            <!-- 大屏时显示的导航项 -->
            <li class="nav-item large-screen-only" style="display:none;"><a href="#" data-icon="user">我的</a></li>
            <li class="nav-item large-screen-only" style="display:none;"><a href="#" data-icon="gear">设置</a></li>
            <li class="nav-item large-screen-only" style="display:none;"><a href="#" data-icon="info">关于</a></li>
        </ul>
    </div>
</div>

<script>
    /**
     * 根据媒体查询状态处理导航栏元素的显示与隐藏
     * @param {MediaQueryList} mediaQuery - matchMedia返回的MediaQueryList对象
     */
    function handleNavbarVisibility(mediaQuery) {
        const smallScreenItems = $('#footerNavbarList .small-screen-only');
        const largeScreenItems = $('#footerNavbarList .large-screen-only');

        if (mediaQuery.matches) { // 屏幕宽度小于或等于700px
            smallScreenItems.show();
            largeScreenItems.hide();
        } else { // 屏幕宽度大于700px
            smallScreenItems.hide();
            largeScreenItems.show();
        }
        // 对于jQuery Mobile Navbar，简单地通过display:none/block控制<li>元素，
        // 浏览器通常会自行重绘。但如果布局出现问题，可能需要更复杂的DOM操作
        // 或重新初始化相关组件。更推荐的做法是结合CSS媒体查询来处理显示/隐藏。
    }

    // 定义媒体查询规则
    const screenMediaQuery = window.matchMedia("(max-width: 700px)");

    // 页面加载时立即执行一次，设置初始状态
    handleNavbarVisibility(screenMediaQuery);

    // 监听媒体查询状态变化，当匹配状态改变时执行回调函数
    screenMediaQuery.addListener(handleNavbarVisibility);

    /**
     * 根据应用内部变量动态更新导航栏（非媒体查询场景）
     * @param {string} variable - 模拟的应用状态变量
     */
    function updateNavbarByVariable(variable) {
        const smallScreenItems = $('#footerNavbarList .small-screen-only');
        const largeScreenItems = $('#footerNavbarList .large-screen-only');

        if (variable === 'loggedIn') {
            // 用户已登录，显示大屏导航项（假设大屏导航项更丰富）
            smallScreenItems.hide();
            largeScreenItems.show();
            // 可以进一步根据具体需求显示或隐藏更多特定元素
        } else if (variable === 'loggedOut') {
            // 用户未登录，显示小屏导航项（假设小屏导航项更精简）
            smallScreenItems.show();
            largeScreenItems.hide();
        }
        // 同样，如果仅是display:none/block，jQuery Mobile通常不需要特别刷新。
        // 但如果涉及添加/移除DOM元素，则需要更谨慎地处理，可能需要触发jQuery Mobile的增强。
    }

    // 示例：在某个应用事件触发时调用
    // $(document).on('mobileinit', function() {
    //     // 假设在应用初始化后根据用户登录状态调整导航栏
    //     const userStatus = 'loggedIn'; // 或 'loggedOut'
    //     updateNavbarByVariable(userStatus);
    // });
</script>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="footerNavbarList">
            <li class="nav-item small-screen-only"><a href="#" data-icon="home">首页</a></li>
            <li class="nav-item small-screen-only"><a href="#" data-icon="search">搜索</a></li>
            <li class="nav-item large-screen-only"><a href="#" data-icon="user">我的</a></li>
            <li class="nav-item large-screen