Question

所以我在网站上有一个区域，它会做什么，当点击加载一些html（1），然后一旦加载html（1）并点击它将加载一些更多的html（2），然后一次html （2）加载并单击它将加载html（3），最后一旦点击它将转到URL。

如何实现这一目标？

只是一个基本的例子可以帮助我开始！

我想要实现的目标：

<div id="container">

     <div id="advert">
         Click this advert to crack the screen
     </div>
     <div id="crack-1" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-2" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-3" style="display:none;z-index:1;position:absolute;"></div>
</div>

因此，当用户第一次点击#advert时，会显示＃crack-1;
当用户点击#advert或＃crack-1（因为＃crack-1可见）时，会显示＃crack-2;
当用户点击#advert，＃crack-1或＃crack-2然后显示＃crack-3;
当用户点击#advert，＃crack-1，＃crack-2或#crack-3然后它会转到网址。

Answer 1

这是一个解决方案：http://jsfiddle.net/maniator/pQaR3/

JS：

$('#advert').click(function() {
    var self = this;
    if (!$('#crack-1').hasClass('open')) {
        $('#crack-1').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-2').hasClass('open')) {
        $('#crack-2').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-3').hasClass('open')) {
        $('#crack-3').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else {
        //follow some link
    }
})

Answer 2

这个怎么样：

$("#container").children().click(function(){
    $(this).siblings(":hidden:first").show();
    if($(this).siblings(":hidden").length===0){
        //all are shown!   
    }
});

点击时jQuery对事件进行了排序

2 个答案: