第二次点击后执行不同的代码（JavaScript）

Question

我的问题是，我一直在开发一个"手风琴菜单"，它使用CSS3转换高度属性，在<li>展开时提供动画效果，其中包含一个子菜单。

展开<li>是通过调用一个函数触发的onclick事件来完成的。该函数根据子菜单包含的 <li>'s数量计算包含<li>的新高度。这一切都正常工作，但我无法想出如何在第二次点击时重置高度以关闭子菜单。

function accordion(ul){
    {
    // Make new height happen
    var howManyChildren = document.getElementById(ul).children.length;
    var calcSubHeight = 30 + howManyChildren * 31 + 'px'; // "top-padding" + amount of <li>'s * each <li> height + unit
    var elementId = ul.replace('_ul','');
    document.getElementById(elementId).style.height = subHeight;
    }
    else // Code to be executed on secound click.
    {
    document.getElementById(elementId).style.height = "";
    }
}

我希望"else"代码段在第二次点击时执行，正如注释所述。 可能我太详细了。抱歉我的英语不好，我是瑞典人。

- Leif Thorén

---

如果您正在制作手风琴框，则可能需要一个切换高度状态的答案。 - AeroX

Answer 1

尝试这个，它会检查高度是否返回false。

function accordion(ul) {
    var elementId = ul.replace('_ul', '');
    if (!document.getElementById(elementId).style.height) {
        var howManyChildren = document.getElementById(ul).children.length;
        var calcSubHeight = 30 + howManyChildren * 31 + 'px'; // "top-padding" + amount of <li>'s * each <li> height + unit
        document.getElementById(elementId).style.height = subHeight;
    } else {
        document.getElementById(elementId).style.height = "";
    }
}

- howderek

---

运行得非常好！只是我在翻译代码时犯了一个错误，在第6行应该是“calcSubHeight”而不是“subHeight”。非常感谢！ - Leif Thorén

Answer 2

要确定是第一次还是第二次点击，您需要保持一个在每次点击时更改的变量。闭包非常适合这个问题：

var accordion = ( function accordionClosure(){
    var count = 0;

    return function accordion( ul ){
        if ( count === 0 ){
            var howManyChildren = document.getElementById(ul).children.length;
            var calcSubHeight = 30 + howManyChildren * 31 + 'px'; // "top-padding" + amount of <li>'s * each <li> height + unit
            var elementId = ul.replace('_ul','');
            document.getElementById(elementId).style.height = subHeight;

            count = 1;
        }
        else {
            document.getElementById(elementId).style.height = "";

            count = 0;
        }
    };
}() );

- Barney