0

我的问题是这个。我创建了一个<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 也是必需的。

4

2 回答 2

2

尝试更换

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

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

于 2013-02-19T19:02:20.173 回答
1

Here is a simpler version of the code:

Markup:

<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/

于 2013-02-19T19:15:45.020 回答