3

So I have this horizontal slider that I've modified to fit my needs, and some of the DOM traversal stuff the author did gets a little confusing. What I'm trying to accomplish is making the tabs being 'close-able' so that once the tabs are opened they can be reverted to their previous state by being clicked again. I feel like this should be really easy but everything I've tried by messing with the jQuery has resulted in various bugs.

Here is the fiddle:

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

This is the basic mechanism of the accordion:

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

Thanks so much in advance to anyone who can provide me with some insight, and I apologize if this isn't the right place for this.

Best, Cooper

4

1 回答 1

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如果效果良好，我可能还建议对 s 的不透明度进行动画显示/删除。只需将相关的.csses 更改为.animates

它确实为我打破了几次，但我不知道为什么

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

于 2013-07-30T02:30:26.230 回答