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

Question

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

3

我有一个水平滑块，我已经修改了一些以适应我的需求，但作者的一些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

- Cooper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

这就是你要找的东西

我不得不添加另一个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更改为.animate即可。

对我来说，它有几次出现了问题，但我找不到原因。

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