Jquery Accordion - 返回原始状态答案

【问题标题】：Jquery Accordion - Return to Original StateJquery Accordion - 返回原始状态
【发布时间】：2013-05-16 00:52:17
【问题描述】：

我已经修改了我在 CSS Tricks 上找到的手风琴菜单，它工作正常，但是...我希望手风琴在第二次单击当前（扩展的）标题时返回到它的原始状态。因此手风琴关闭并识别出原始的起始宽度。

我在 codepen 上有示例...感谢任何愿意对此进行破解的人！我会睁大眼睛想弄清楚。

http://codepen.io/Sektion66/pen/vAGsn

谢谢！

【问题讨论】：

标签： jquery accordion

【解决方案1】：

它作为代码的演示 (http://jsfiddle.net/h3Kbu/1/show/) 和 (http://jsfiddle.net/h3Kbu/1/) 工作。基本上else 部分是新代码。

if (!$el.hasClass("current")) {

        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt").not(this);

        // close all info cells
        $allCells.slideUp();

        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        });

        // animate current title to larger size            
        $el.animate({
            "font-size": "20px",
            paddingTop: 10,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        }).next().slideDown();

        // make the current column the large size
        $parentWrap.animate({
            width: 425
        })

        // make other columns the small size
        $otherWraps.animate({
            width: 250
        })

        // make sure the correct column is current
        $allTitles.removeClass("current");
        $el.addClass("current"); 
    }else{
        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt");

        // close all info cells
        $allCells.slideUp();

        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        });

        // animate current title to larger size            


        // make the current column the large size
        $parentWrap.animate({
            width: 250
        })

        // make other columns the small size
        $otherWraps.animate({
            width: 250
        })

        // make sure the correct column is current
        $allTitles.removeClass("current");
       // $el.addClass("current"); 
    }

【讨论】：

非常感谢。我还在学习 JQuery，这对我很有帮助。

【解决方案2】：

这是我的破解之道：

http://codepen.io/anon/pen/kszyb

刚刚在您的if (!$el.hasClass("current")) 语句中添加了else，将元素恢复到正常状态。

还做了这些以避免重复动画状态：

    var currentState = {
            "font-size": "20px",
            paddingTop: 10,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        };

    var normalState = {
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        };

【讨论】：