jquery - 如何使水平 Accordion 选项卡在第二次单击时关闭？

Question

所以我修改了这个水平 slider 以满足我的需要，而作者所做的一些 DOM 遍历内容有点令人困惑。我想要完成的任务是使选项卡“可关闭”，以便一旦打开选项卡，可以通过再次单击将其恢复到之前的状态。我觉得这应该很容易，但我尝试过的所有 jQuery 操作都导致了各种错误。

这是 fiddle :

http://jsfiddle.net/GxFan/8/

这是 Accordion 的基 native 制:

$("div.slide div.handle").click(function () {

    if ($(this).parent("div.slide").hasClass("opened")) {

        $(this).siblings().css({
            "opacity": "1"
        });
        var e = $(this).parent("div.slide");
        var p = e.prevAll("div.slide.opened");
        var ph = p.children("div.handle").children('.handle-arrow').children("img");
        var pi = p.children("div.inside");
        //e.children("div.inside").animate({"margin-left":"-883px"}, 1000);
        pi.animate({
            "margin-left": "-400px"
        }, 800, function () {
            ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
            //e.css({"width":"39px"});
            pi.css({
                "width": "39px"
            });
            //e.children("div.inside").css({"width":"0px", "margin-left":"0px"});
            pi.css({
                "width": "0px",
                "margin-left": "0px"
            });
            //e.removeClass("opened");
            p.removeClass("opened");
        });
        //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000);
        ph.rotate('0deg');

    } else {
        $(this).siblings().css({
            "opacity": "1"
        });
        var e = $(this).parent("div.slide");
        var n = e.nextAll("div.slide:not(.opened)");
        var ei = e.children("div.inside");
        var ni = n.children("div.inside");
        var eh = e.children("div.handle").children('.handle-arrow').children("img");
        var nh = n.children("div.handle").children('.handle-arrow').children("img");
        $(this).parent("div.slide").siblings().children('.inside').css({
            "opacity": "0"
        });
        e.css({
            "width": "270px"
        });
        n.css({
            "width": "270px"
        });
        ei.animate({
            "width": "230px",
            "margin-left": "0px"
        }, 800);
        ni.animate({
            "width": "230px",
            "margin-left": "0px"
        }, 800);
        eh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
        nh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
        eh.rotate('180deg');
        nh.rotate('180deg');
        e.addClass("opened");
        n.addClass("opened");
        e.addClass("opened2");
        n.addClass("opened2");

        $(".initial-image").clearQueue().stop(true, false);
    }

提前非常感谢任何能为我提供一些见解的人，如果这不是合适的地方，我深表歉意。

最好，库珀

Answer 1

Here is what you're looking for

我必须添加另一个 if 语句并使用您对添加的 opened2 类的想法来使其正常运行

这是更新后的 jQuery

 $(function () {

    $("div.slide div.handle").click(function () {
        if ($(this).parent("div.slide").hasClass("opened") && !$(this).parent("div.slide").hasClass("opened2")) {
            $(this).siblings().css({
                "opacity": "1"
            });
            var e = $(this).parent("div.slide");
            var p = e.prevAll("div.slide.opened");
            var ph = p.children("div.handle").children('.handle-arrow').children("img");
            var pi = p.children("div.inside");
            //e.children("div.inside").animate({"margin-left":"-883px"}, 1000);
            pi.animate({
                "margin-left": "-400px"
            }, 800, function () {
                ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
                //e.css({"width":"39px"});
                pi.css({
                    "width": "39px"
                });
                //e.children("div.inside").css({"width":"0px", "margin-left":"0px"});
                pi.css({
                    "width": "0px",
                        "margin-left": "0px"
                });
                //e.removeClass("opened");
                p.removeClass("opened");
            });
            //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000);
            ph.rotate('0deg');
            $(this).parent("div.slide").addClass("opened2");
            $(this).parent("div.slide").siblings().removeClass("opened2");

        } else if ($(this).parent("div.slide").hasClass("opened2")) {
            $(this).parent("div.slide").removeClass("opened2");
            $(this).siblings().css({
                "opacity": "1"
            });
            var e = $(this).parent("div.slide");
            var p = e.prevAll("div.slide.opened").andSelf();
            var ph = p.children("div.handle").children('.handle-arrow').children("img");
            var pi = p.children("div.inside");
            //e.children("div.inside").animate({"margin-left":"-883px"}, 1000);
            pi.animate({
                "margin-left": "-400px"
            }, 800, function () {
                ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
                //e.css({"width":"39px"});
                pi.css({
                    "width": "39px"
                });
                //e.children("div.inside").css({"width":"0px", "margin-left":"0px"});
                pi.css({
                    "width": "0px",
                        "margin-left": "0px"
                });
                //e.removeClass("opened");
                p.removeClass("opened");
            });
            //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000);
            ph.rotate('0deg');
            var next = $(this).parent("div.slide").next("div.slide");
            if (next.length > 0) {
                next.addClass("opened2").children("div.inside").css({
                    "opacity": "1"
                });
            }
        } else {
            $(this).siblings().css({
                "opacity": "1"
            });
            var e = $(this).parent("div.slide");
            var n = e.nextAll("div.slide:not(.opened)");
            var ei = e.children("div.inside");
            var ni = n.children("div.inside");
            var eh = e.children("div.handle").children('.handle-arrow').children("img");
            var nh = n.children("div.handle").children('.handle-arrow').children("img");
            $(this).parent("div.slide").siblings().children('.inside').css({
                "opacity": "0"
            });
            e.css({
                "width": "270px"
            });
            n.css({
                "width": "270px"
            });
            ei.animate({
                "width": "230px",
                    "margin-left": "0px"
            }, 800);
            ni.animate({
                "width": "230px",
                    "margin-left": "0px"
            }, 800);
            eh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
            nh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
            eh.rotate('180deg');
            nh.rotate('180deg');
            e.addClass("opened");
            n.addClass("opened");
            $(this).parent("div.slide").addClass("opened2");
            $(this).parent("div.slide").siblings().removeClass("opened2");

            $(".initial-image").clearQueue().stop(true, false);
        }
    });

});

箭头在您或我的版本中无法完美运行，但这是另一个问题(或更适合您自己修复)

如果效果良好，我还可能建议对显示/删除的 .inside 的不透明度进行动画处理。只需将相关的 .csses 更改为 .animates

它确实对我来说坏了几次，但我不知道为什么

注意:对于新版本的 jQuery，您需要将 .andSelf() 更改为 .addBack()