JQuery UI(效果核心)在具有多个选择器的一个元素上 addClass/removeClass...但有一个问题

Question

感谢您的浏览。我尝试使用 jQ UI addClass/remove Class 方法在单击前面的同级 div 时展开 hr 元素。 jQ UI 效果核心可实现两个类之间的平滑动画过渡:http://jqueryui.com/demos/removeClass/ 。此外，hr 必须通过 $ 动态添加，以实现更广泛的站点设计。

以下是拼图的各个部分:

1. 我的代码呈现四个 100x100px 同级 div 的行。这些 div 没有类，但如果有帮助的话请随意添加它们——每个 div 最终都会有一个独特的类。每第 4 个 div 之后，就会动态添加一个 hr。
2. 单击任何给定的 div 后，紧接着的下一个小时必须切换到“open”类，这会导致行展开。如果再次单击此 div，它必须从 hr 中切换/删除“open”类，从而导致 hr 缩小到其原始大小。
3. 如果单击一个 div 来展开 hr，然后单击另一个 div，则必须触发两个动画:首先，必须删除“open”类，导致行缩小回来，然后必须将该类重新添加以重新打开该行。但是，例如，如果单击一个 div 以打开第二行，然后单击第一个 hr 之前的第二个 div，则此操作必须首先关闭第二个 hr，然后打开第二个 div 对应的 hr。

我被困住了。我尝试了许多 jQ 函数组合，但结果很奇怪。你所看到的是我所得到的最接近的。感谢您尝试一下。请随意添加代码以使其正常工作。

<!--HTML...the children divs of ".main" can have their own unique classes if that helps-->
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

/*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/

.main  {
    width: 450px;
}
.main div {
    height: 100px;
    width: 100px;
    background-color: #000;
    margin: 3px;
    float:left;
}
div.select   {
    background-color: #f00;
    border: 2px solid #00F;
    margin: 3px;
    float:left;
    display: block;
}
div.active   {
    background-color: #f00;
    margin: 3px;
    float:left;
    display: block;
}
hr  {
    background-color: #FF0;
    float: left;
    display: block;
    height: 20px;
    width: 450px;
}
hr.open {
    float: left;
    display: block;
    height: 300px;
    width: 450px;

}

/*the JS - sorry about the double quotes.  I'm using Dreamweaver, which seems to add them to everything*/

$(document).ready(function() {
//dynamcally adds the <hr> after every 4th div.
    $(".main div:nth-child(4n)").after('<hr class="closed"></hr>');
//puts a blue border on the squares
    $('.main div').hover(function()  {
        $(this).addClass('select');
    },
    function() {
        $(this).removeClass('select')
    });
//changes the color of the active square to red and "deactivates" the previous one.
    $('.main div').click(function()  {
        $(this).toggleClass('active').siblings().removeClass('active');
    });
//here in lies the problem...???
    $('.main div').click(function()  {
        $('hr').removeClass('open', 1000);
        $(this).toggle
        (function() {
            $(this).nextAll("hr").first().addClass('open', 500);
        },
        function()  {
            $(this).nextAll("hr").first().removeClass('open', 500)
        });

    });
});

Answer 1

我很确定这就是您想要的，我从 http://makr.com 复制了常规 HTML 布局(您提到这就是您想要的):

演示:http://jsfiddle.net/SO_AMK/xm7Sk/

jQuery:

$(".main article:nth-child(4n)").after('<hr class="split"></hr>');
$(".main > article .slidedown").click(function(e) {
        e.stopPropagation();
}); // If you click on the slidedown, it won't collapse

var canAnimate = true,
    slideIsOpen = false,
    animateSpeed = 1000;

$(".main > article").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
}).click(function() {
    if (canAnimate) {
        canAnimate = false;
        var article = $(this),
            isThisOpen = article.hasClass("active");
        if (isThisOpen) {
            $(".main").queue(function () {
                hideSlide($(this))
            });
        }
        else {
            if (slideIsOpen) {
                $(".main").queue(function () {
                    hideSlide($(this));
                }).queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
            else {
                $(".main").queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
        }
    }
});

function showSlide(elm, main) {
        canAnimate = false;
        slideIsOpen = true;
        elm.nextAll("hr.split").first().addClass("active", animateSpeed);

        elm.children(".slidedown").css("top", (elm.offset().top + 114)).addClass("active").slideToggle(animateSpeed);

        elm.addClass("active");
        main.dequeue();
        canAnimate = true;
}

function hideSlide(main) {
        canAnimate = false;
        $(".main article.active").nextAll("hr.split.active").removeClass("active", animateSpeed);

        $(".main article.active").children(".slidedown").removeClass("active").slideToggle(animateSpeed);

        $(".main article.active").removeClass("active");
        $(main).dequeue();
        canAnimate = true;
        slideIsOpen = false;
}

function positionPage(elm, main) {
    canAnimate = false;
    var body;
    if ($.browser.safari) {
        body = $("body");
    }
    else {
        body = $("html");
    }
    var elmTop = elm.offset().top,
        bodyScroll = body.scrollTop();
    if (bodyScroll - elmTop == 0) {
        var speed = 0;
    }
    else {
        var speed = animateSpeed;
    }
    body.animate({
        scrollTop: elmTop
    }, speed, function () {
        main.dequeue();
        canAnimate = true;
    })
}​

对于这么小的东西来说，这似乎是一个很大的脚本，但它有一些故障保护。唯一的错误是，如果您在转换过程中开始快速单击，有时队列会以错误的顺序结束。但是，普通用户在动画期间不会快速点击:D