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

Javascript：扩展框切换按钮

2 个答案: