jquery - Jquery Accordion - 返回原始状态

Question

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

我有关于codepen的例子......感谢任何愿意对此进行破解的人！我要斗鸡眼想弄清楚。

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

谢谢！

Answer 1

这是我的破解：

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

刚刚else在您的if (!$el.hasClass("current"))声明中添加了一个，将元素反转为正常状态。

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

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

Answer 2

它作为代码的演示（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"); 
    }