javascript - 将 Jquery slidetoggle 代码转换为 Javascript

Question

如何将 jQuery slidetoggle() 函数转换为 Javascript？

 var $context = getContext(context);

        $($context).on('click', '.m_menu', function () {
            $('.w_nav').slideToggle();
        });

Answer 1

好吧，这不是将 jQuery 代码转换为 javascript，而是用纯 javascript 进行。它可以通过不同的方式实现。以下是我想到的两个:

HTML:

<button id="mbtn" onclick="slideToggle()">SlideToggle</button>
<div id="mdiv">Some context</div>

<强>1。使用 javascript 的 setInterval :
有一个 bool 值来跟踪我们是否需要 slideUp 或 slideDown(切换)并使用 setInterval 来增加/减少高度。

jsfiddle DEMO

Javascript:

var slideOpen = true;
var heightChecked = false;
var initHeight = 0;
var intval = null;

function slideToggle() {
    window.clearInterval(intval);
    var mdiv = document.getElementById('mdiv');
    if(!heightChecked) {
        initHeight = mdiv.offsetHeight;
        heightChecked = true;
    }
    if(slideOpen) {
        var h = initHeight;
        slideOpen = false;
        intval = setInterval(function(){
            h--;
            mdiv.style.height = h + 'px';
            if(h <= 0)
                window.clearInterval(intval);
            }, 1
        );
    }
    else {
        var h = 0;
        slideOpen = true;
        intval = setInterval(function(){
            h++;
            mdiv.style.height = h + 'px';
            if(h >= initHeight)
                window.clearInterval(intval);
            }, 1
        );
    }
}

<强>2。使用CSS3 transition :
从 CSS3 transition 获得帮助与 javascript 一起使用，这将使实现幻灯片效果变得容易得多。然后我们只需要在 javascript 中更改高度，剩下的就完成了。

jsfiddle DEMO

CSS:

#mdiv {
    /* other styles */
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Javascript:

var slideOpen = true;
var heightChecked = false;
var initHeight = 0;

function slideToggle() {
    var mdiv = document.getElementById('mdiv');
    if(!heightChecked) {
        initHeight = mdiv.offsetHeight;
        heightChecked = true;
    }
    if(slideOpen) {
        slideOpen = false;
        mdiv.style.height = '0px';
    }
    else {
        slideOpen = true;
        mdiv.style.height = initHeight + 'px';
    }
}

编辑:
如果我们希望起始高度为 0，那么我们需要进行一些更改:

var slideOpen = false;
//var heightChecked = false;
var initHeight = 120; //height of the element when it's fully open

我们需要注释掉这一点:

/*
if(!heightChecked) {
    initHeight = mdiv.offsetHeight;
    heightChecked = true;
}
*/

jsfiddle DEMO

编辑#2
正如 Sandro 指出的那样，上下文实际上并没有被隐藏，因此更新了 fiddle 并添加了 overflow-y: hidden; 并更改了文本颜色以提高可见性。也将 open 更改为 slideOpen，因为 open 是一种保留字。