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

Jquery手风琴 - 回归原始状态

2 个答案: