jquery - 如何使jquery mobile listview消失

Question

我有一个基本的 jquery 移动单列表视图项目。当用户单击右侧的箭头时，我想让列表视图项目消失并被另一个列表视图项目替换。

我下面的代码是标准列表视图

   <ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
   </ul>

我希望有人可以建议是否可能，我是否必须使用 .remove() 清除整个列表视图；并创建一个新的？

谢谢

Answer 1

像这样的东西也可以——那么你不必有预定义的列表。

Javascript：

$(".mylist").on("vclick", function(e){
var item = $(e.target).closest("li");
var newItem = '<li><a href="#">New Item</a></li>';
item.hide(500);
setTimeout(function(e){
    item.remove();
    $(".mylist").append(newItem).listview("refresh");
}, 500);

});

http://jsfiddle.net/69Xfz/40/

Answer 2

编辑：我更新了代码（使用较新的 jQuery Mobile 版本，并从代码中删除了 ready() 函数。我还添加了 div 包装器，这样隐藏或显示它们会完全隐藏列表和搜索栏。

HTML：

<div id="l1">
    <ul data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">Acura</a></li>
    </ul>
</div>
<div id="l2">
    <ul data-role="listview" data-inset="true" data-filter="true" id="l2">
        <li><a href="#">Second List View</a></li>
    </ul>
</div>

Javascript：

$("#l2").hide();
$('#l1').on('click', 'li', function() {
    $("#l1").fadeOut(300,function(){
        $("#l2").show();
    });
});

这段代码看起来更简洁。祝你好运！

JSFiddle：http: //jsfiddle.net/69Xfz/39/