Question

我的问题是我一直在制作一个“手风琴菜单”，它在高度属性上使用CSS3过渡，在<li>扩展时给它一个动画，它包含一个子菜单。

在调用由onclick事件触发的函数时发生<li>的扩展。该函数根据子菜单包含的<li>个数来计算包含<li>'s的新高度。所有这一切都很好，但是我无法弄清楚如何在第二次点击时重置高度，以关闭子菜单。

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”块在secound点击上执行，如评论所述。所以我可能会在这里详细说明一下。请原谅英语不好，我很瑞典。

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

第二次单击时执行不同的代码（JavaScript）

2 个答案: