Question

理想情况下，即时尝试单击div，找到父级中的下一个类。淡入该课程，删除课程。

再次单击div，然后找到下一个“page”类，淡入，删除该类。

任何帮助都会很棒。目前，.find，.next，.nextAll导致所有ul与类页面一次淡入。

HTML

<div id="container" class="">
    <ul id="page_1">
    <ul id="page_2" class="page">
    <ul id="page_3" class="page">
    <ul id="page_4" class="page">
    </div>

JS

$("#click").click(function() { 
    $("#container").children().closest('.page').fadeIn();
});

Answer 1

你可以尝试：

$("#click").click(function() {
    var active;
    if ($('#container > .active').length) {
        active = $('#container > .active');
        active.removeClass('active');
        active.next().addClass('active');
        active = active.next();
    } else {
        active = $('#container > .page:first');
        active.addClass('active');
    }
    active.fadeIn();
});

（你的标记不正确，假设：）

<div id="container" class="">
    <ul id="page_1"></ul>
    <ul id="page_2" class="page"></ul>
    <ul id="page_3" class="page"></ul>
    <ul id="page_4" class="page"></ul>
 </div>

在这里摆弄http://jsfiddle.net/kmtCV/2/

Answer 2

试试这个。

$('#click').click(function() { 
    $('#container > .page:first').fadeIn();
});

Answer 3

当.page元素淡入时，您可以向其中添加visible类，在淡出下一个元素时使用:not作为选择器排除。见http://jsfiddle.net/rTfcy/

.click，在父级中查找下一个类元素，淡入，删除类。重复

3 个答案: