css - jqueryMobile 面板主题不工作

Question

我终生不明白为什么这个 jquery 移动面板无法呈现与应用程序中使用的 jquery 移动主题相同的外观和感觉。

面板与我的 jquery 移动页面的其余部分加载在同一页面上，因此 jquery 移动 css 文件和 jquery js 文件都被引用并在页面的其他部分上工作。

我的布局中缺少什么？

谢谢

 <div data-role="page" id="map_page">
        <div data-role="panel" id="transitLayersPage" data-position="right" data-display="overlay">
            <div data-role="header">
                <h1>Routes</h1>
            </div>        
            <div data-role="controlgroup">
                <div id="checkboxes">
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(0)" />
                    <label>Routes 1</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(1)" />
                    <label>Routes 2</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(2)" />
                    <label>Routes 3</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(3)" />
                    <label>Routes 4</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(4)" />
                    <label>Routes 5</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(5)" />
                    <label>Routes 6a</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(6)" />
                    <label>Routes 6b</label>
                </div>
                <a href="#my-header" data-role="button" data-rel="close">Close panel</a>
            </div>
            </div>

Answer 1

您忘记将 for 属性添加到 label。此外，您不应该为 checkbox 使用重复的 id，每个 checkbox 必须有一个唯一的 id。

<input type="checkbox" id="foo">
<label for="foo">bar</label>

Demo