Question

我的问题是这个。我在边<li>元素中创建<ul>列表。当你点击其中一个<li>元素时，其他元素就会消失。现在，当您点击[See all items]时，上一个列表显示为agen。但现在当你点击其他元素时，没有任何反应。这应该是因为新元素在您单击它时不知道什么待办事项。我们需要一个回调！但是我没有得到我应该写入这个回调函数的内容？！

我的代码：http://jsfiddle.net/cRcNB/。在JS部分中有easying.js和quicksand.js。所以向下滚动（一直），你会看到我的（短）代码。：）

我会按照要求在这里发布我的代码：

$(document).ready(function(){   
    var $holder = $('ul.holder');
    var $data = $holder.clone();

    $('ul.holder li').click(
        function(e){
            $holder.quicksand($(this),{
                duration: 800,
            });
        return false;
    }); 
    $('#all').click(
        function(e){
            $new = $data.find('li')
            $holder.quicksand($new,{
                duration: 800
            }
        );
        return false;
    });
})

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li id='all'>[See all items]</li>
    </ul>
    <ul class='holder'>
        <li data-id="1" data-type="a">heaven</li>
        <li data-id="2"data-type="b">love</li>
    </ul>
</body>
</html>

Quiksand1.3.js和Easing.js也是必需的。

Answer 1

尝试替换

$('ul.holder li').click(
    function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

使用：

$('ul.holder').on('click', 'li', function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

这会将点击处理程序绑定到始终位于DOM中的<ul>。当您删除<li>时，您也会丢弃他们的点击处理程序。这可能是问题所在。

Answer 2

这是一个更简单的代码版本：

标记：

<ul>
    <li id='all'>[See all items]</li>
</ul>
<ul class='holder'>
    <li data-id="1" data-type="a">heaven</li>
    <li data-id="2"data-type="b">Earth</li>
    <li data-id="2"data-type="b">Dirt</li>
    <li data-id="2"data-type="b">Peace</li>
    <li data-id="2"data-type="b">More</li>
</ul>

jQuery的：

$("#all").on("click",function(){
    $(".holder li").show("slow");
});
$(".holder li").on("click",function(){
    $(".holder li").not($(this)).hide("slow");
});

JSFiddle：http://jsfiddle.net/5ChVE/5/

需要回调，不知道如何

2 个答案: