Question

我正在尝试复制此代码：http://jsfiddle.net/ezanker/5qe6g/1/

我正在使用goolge blogger

我在模板html中有我的导入

<head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js' type='text/javascript'/> 
    <script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js' type='text/javascript'/> 
    <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'/>
    <script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css' type='text/javascript'/>
    <script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>     
    <script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>

问题是没有调用“onpagecreate”。如果我这样摆脱它：

function createList(menudata){
    var html = '';
    $.each(menudata,function(i,val){
        html += '<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true">';
        $.each(val.productoption,function(i,val){
            html += '<li class="row">'+val.topping+'</li>';
        });
        html += '</ul></div>';
    });
    return html;
}

    var menulistitem = createList(data);
    $('#menu-content').empty().append(menulistitem);
    $('div[data-role=collapsible]').collapsible();
    $('div ul').listview();

它绘制菜单，但它不可折叠。我假设它不可折叠的原因是时机已关闭

任何人都知道如何解决这个问题？

谢谢！

Answer 1

问题出在head文件的html标记中。首先，您不需要多次加载相同的文件。问题是你将jquery.mobile-1.4.5.min.css CSS文件放在脚本标记中。 CSS文件需要加入链接标记：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

清除一些不必要的jquery加载后，您的头部标记只需要外部资源：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

查看工作代码：codePen

.on（“pagecreate”）未被调用

1 个答案: