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);
    }

非常感谢能够为我提供一些见解的任何人，如果这不是正确的地方我会道歉。

最佳，库珀

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的不透明度，如果效果很好的话。只需将相关.css es更改为.animate s

即可

它确实为我打破了几次，但我找不到原因

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

如何在第二次点击时关闭这个水平手风琴标签？

1 个答案: