如何使此水平手风琴的选项卡在第二次单击时关闭？

Question

所以我修改了这个水平滑块以满足我的需求，作者做的一些DOM遍历工作有点令人困惑。我试图实现的是使选项卡"可关闭"，这样一旦打开选项卡，就可以通过再次单击将其恢复到以前的状态。我觉得这应该很容易，但我尝试过的所有扰乱jQuery的操作都导致了各种错误。

这是小提琴：

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

这是手风琴的基本机制：

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

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

最佳，Cooper

Answer 1

以下是您想要的

我不得不添加另一个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的不透明度设置动画。只需将相关的.css es更改为.animate s

它确实坏了好几次，尽管我不知道的原因

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