我在 jquery 个移动菜单之间得到 space

Question

为什么我在列表视图菜单

之间得到 space

这是我的代码

<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();
});

除此之外，您的代码有效：

Working DEMO

注意：如果您从 jQM dem 站点复制列表视图标记，您可能会在标记中得到额外的   个字符而不是常规空格。尝试清除源页面中 <LI> 元素之间的所有空格，看看问题是否消失。

我在 jquery 个移动菜单之间得到 space

I am getting space between jquery mobile menus

jquery

jquery-mobile