Javascript：扩展框切换按钮

Question

我想要做的是一个扩展框，该扩展框可以通过按同一按钮来扩展和收缩。 我有功能，但是我不确定从这里去哪里。 我需要编写一些代码，让我使用相同的按钮运行这些功能，如果扩展则撤消，反之亦然。 我将如何去做呢？

这是我的功能：

function expand(element){
    var target = document.getElementById(element);
    var h = target.offsetHeight;
    var sh = target.scrollHeight;
    var loopTimer = setTimeout('expand(\''+element+'\')',8);

    if(h < sh){
        h += 5;
    }  

    else {
        clearTimeout(loopTimer);
    }

    target.style.height = h+"px";
}

function retract(element){
    var target = document.getElementById(element);
    var h = target.offsetHeight;
    var loopTimer = setTimeout('retract(\''+element+'\')',8);

    if(h > 0){
        h -= 5;
    }

    else {
        target.style.height = "0px";
        clearTimeout(loopTimer);
    }

    target.style.height = h+"px";
}

这是HTML

<p class="mbars">
        <a href="#">Togglebutton 1</a>  
</p>
<div id="div1" class="mydivs">
    <p>Box 1 Content</p>
    <p>Box 1 Content</p>
    <p>Box 1 Content</p>
</div>

<p class="mbars">
    <a href="#">Togglebutton 2</a>  
</p>
<div id="div2" class="mydivs">
    <p>Box 2 Content</p>
    <p>Box 2 Content</p>
    <p>Box 2 Content</p>
    <p>Box 2 Content</p>
    <p>Box 2 Content</p>
</div>

非常感谢您的帮助！

Answer 1

您可以添加一个函数来检查div高度并决定是否相应地扩展或缩回，类似于：

   function toggle(element) {
        var target = document.getElementById(element);
        var h = target.offsetHeight;

        if(h < 5){
            expand(element);
        } else {
            retract(element);
        }
    }

Answer 2

结合ProfessorT的答案，我们可以将其与数据属性和事件侦听器结合在一起。

HTML：

<a href="#" data-toggle-div='div1'>Togglebutton 1</a>

JavaScript的：

function toggle(element) {
    var target = document.getElementById(element);
    var h = target.offsetHeight;

    if(h < 5){
        expand(element);
    } else {
        retract(element);
    }
}


document.querySelector('a').addEventListener('click', function (event) {
    var id = event.target.getAttribute('data-toggle-div');
    toggle(id);
}