第二次點擊時執行不同的代碼 (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”塊在第二次點擊時執行。 所以我可能會在這里詳細說明。 請原諒我的英語不好，我是瑞典人。

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

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