我在jquery移动菜单之间获得了空间

Question

为什么我在listview菜单之间获得空间

这是我的代码

<script id="panel-init">
    $( document ).on( "pagecreate", function() {
        $( "body > [data-role='panel']" ).panel();
        $( "body > [data-role='panel'] [data-role='listview']" ).listview();
    });
    $( document ).one( "pageshow", function() {
        $( "body > [data-role='header']" ).toolbar();
        $( "body > [data-role='header'] [data-role='navbar']" ).navbar();
    });
</script>

HTML：

<div data-role="header" data-position="fixed">
        <h3>Order</h3>
        <a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-back" data-rel="back"></a>
        <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars" href="#rightPanel"></a>
      </div>

以下是page

中定义的外部面板

<!-- Right panel-->
    <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="rightPanel">
<ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>
    </div><!-- /rightPanel -->

Answer 1

您只需要在文档就绪时初始化标题和面板，而不是在pagecreate或pageshow上：

$(function() {
    $( "body > [data-role='panel']" ).panel();
    $( "body > [data-role='panel'] [data-role='listview']" ).listview();

    $( "[data-role='navbar']" ).navbar();
    $( "[data-role='header']" ).toolbar();
});

除了您的代码之外：

  

正在使用 DEMO

注意：如果您从jQM dem网站复制了listview标记，则最终可能会在标记中添加额外的 个字符而不是常规空格。尝试删除源页面中<LI>元素之间的所有空格，并查看问题是否消失。