将Jquery slidetoggle代码转换为Javascript [英] Convert Jquery slidetoggle code to Javascript

问题描述

如何将jQuery slidetoggle（）函数转换为Javascript？

  var $ context = getContext（context）; 
 
 $（$ context）.on（'click'，'。m_menu'，function（）{
 $（'。w_nav'）。slideToggle（）; 
} ）; 
  

解决方案

这不是将jQuery代码转换为javascript，而是在普通的javascript中进行。它可以通过不同方式实现。以下是我想到的两个：

HTML：

 < button id =mbtnonclick =slideToggle（）> SlideToggle< / button> 
< div id =mdiv>某些上下文< / div> 
  

1。使用javascript的 setInterval ：

有一个布尔值来跟踪我们是否需要slideUp或slideDown（切换）并使用 setInterval 增加/减少高度。

jsfiddle DEMO

Javascript：

  var open = 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（open）{
 var h = initHeight; 
 open = false; 
 intval = setInterval（function（）{
 h--; 
 mdiv.style.height = h +'px'; 
 if（h< = 0）
 window.clearInterval（intval）; 
}，1 
）; 
} 
 else {
 var h = 0; 
 open = true; 
 intval = setInterval（function（）{
 h ++; 
 mdiv.style.height = h +'px'; 
 if（h> = initHeight）
 window.clearInterval（intval）; 
}，1 
）; 
} 
} 
  

2。使用 CSS3过渡：

从CSS3过渡获得帮助以配合javascript，这将使实现幻灯片效果更容易。然后我们只需要在javascript中更改高度，剩下的就完成了。

jsfiddle DEMO

CSS：

  #mdiv {
 / *其他风格* / 
 -webkit-transition：全部1s轻松进出; 
过渡：全部轻松进出; 
} 
  

Javascript：

  var open = true; 
 var heightChecked = false; 
 var initHeight = 0; 
 
 function slideToggle（）{
 var mdiv = document.getElementById（'mdiv'）; 
 if（！heightChecked）{
 initHeight = mdiv.offsetHeight; 
 heightChecked = true; 
} 
 if（open）{
 open = false; 
 mdiv.style.height ='0px'; 
} 
 else {
 open = true; 
 mdiv.style.height = initHeight +'px'; 
} 
} 
  

编辑：

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

  var open = false; 
 // var heightChecked = false; 
 var initHeight = 120; //元素完全打开时的高度
  

我们需要评论这一点： initHeight = mdiv.offsetHeight;
heightChecked = true;
}
* /

jsfiddle DEMO

How can I convert the jQuery slidetoggle() function into Javascript?

 var $context = getContext(context);

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

解决方案

Well this is not converting the jQuery code to javascript, but rather doing it in plain javascript. It can be achieved in different ways. Here are two that comes to my mind:

HTML:

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

1. Using javascript's setInterval :
Having a boolean value to keep track of whether we need to slideUp or slideDown (toggle) and using setInterval to increase/decrease the height.

jsfiddle DEMO

Javascript:

var open = 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(open) {
        var h = initHeight;
        open = false;
        intval = setInterval(function(){
            h--;
            mdiv.style.height = h + 'px';
            if(h <= 0)
                window.clearInterval(intval);
            }, 1
        );
    }
    else {
        var h = 0;
        open = true;
        intval = setInterval(function(){
            h++;
            mdiv.style.height = h + 'px';
            if(h >= initHeight)
                window.clearInterval(intval);
            }, 1
        );
    }
}

2. Using CSS3 transition:
Getting help from CSS3 transition to go along with javascript which will make it a lot easier to achieve the slide effect. Then we'll only need to change the height in javascript and the rest is done.

jsfiddle DEMO

CSS:

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

Javascript:

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

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

EDIT:
If we want the starting height to be 0, then we'll need a few changes:

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

And we need to comment this bit out:

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

jsfiddle DEMO

这篇关于将Jquery slidetoggle代码转换为Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！