将Jquery slidetoggle代码转换为Javascript

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

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

Answer 1

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

HTML：

 SlideToggle 
Some context 

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 { /* 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'; } } 

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

 var open = 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

Answer 2

要重新实现（转换）jquery slideToggle（）到vanilla javascript，您还需要重新实现jquery slideUp（）和slideDown（） 。

 var DOMAnimations = { /** * SlideUp * * @param {HTMLElement} element * @param {Number} duration * @returns {Promise} */ slideUp: function (element, duration = 500) { return new Promise(function (resolve, reject) { element.style.height = element.offsetHeight + 'px'; element.style.transitionProperty = `height, margin, padding`; element.style.transitionDuration = duration + 'ms'; element.offsetHeight; element.style.overflow = 'hidden'; element.style.height = 0; element.style.paddingTop = 0; element.style.paddingBottom = 0; element.style.marginTop = 0; element.style.marginBottom = 0; window.setTimeout(function () { element.style.display = 'none'; element.style.removeProperty('height'); element.style.removeProperty('padding-top'); element.style.removeProperty('padding-bottom'); element.style.removeProperty('margin-top'); element.style.removeProperty('margin-bottom'); element.style.removeProperty('overflow'); element.style.removeProperty('transition-duration'); element.style.removeProperty('transition-property'); resolve(false); }, duration) }) }, /** * SlideDown * * @param {HTMLElement} element * @param {Number} duration * @returns {Promise} */ slideDown: function (element, duration = 500) { return new Promise(function (resolve, reject) { element.style.removeProperty('display'); let display = window.getComputedStyle(element).display; if (display === 'none') display = 'block'; element.style.display = display; let height = element.offsetHeight; element.style.overflow = 'hidden'; element.style.height = 0; element.style.paddingTop = 0; element.style.paddingBottom = 0; element.style.marginTop = 0; element.style.marginBottom = 0; element.offsetHeight; element.style.transitionProperty = `height, margin, padding`; element.style.transitionDuration = duration + 'ms'; element.style.height = height + 'px'; element.style.removeProperty('padding-top'); element.style.removeProperty('padding-bottom'); element.style.removeProperty('margin-top'); element.style.removeProperty('margin-bottom'); window.setTimeout(function () { element.style.removeProperty('height'); element.style.removeProperty('overflow'); element.style.removeProperty('transition-duration'); element.style.removeProperty('transition-property'); }, duration) }) }, /** * SlideToggle * * @param {HTMLElement} element * @param {Number} duration * @returns {Promise} */ slideToggle: function (element, duration = 500) { if (window.getComputedStyle(element).display === 'none') { return this.slideDown(element, duration); } else { return this.slideUp(element, duration); } } } // ------------------------------------------------------ document.addEventListener("DOMContentLoaded", function() { var button = document.getElementById('slideToggle'); var cardElement = document.getElementById('firstCard'); button.addEventListener('click', function(event) { event.preventDefault(); DOMAnimations.slideToggle(cardElement); }); }); 

 * { box-sizing: border-box; } /* Add a gray background color with some padding */ body { font-family: Arial; padding: 20px; background: #f1f1f1; } /* Header/Blog Title */ .header { padding: 10px; font-size: 24px; text-align: center; background: white; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 100%; } /* Fake image */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Add a card effect for articles */ .card { position:relative; background-color: white; padding: 20px; margin-top: 20px; } #slideToggle { background-color: #f9f5f5; color: black; border: 2px solid #a9b5a9; padding: 5px; margin-top:20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; font-weight: bold; border-radius: 5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } 

       
 
Blog Name
 
 
 
 slideToggle 
 
FIRST TITLE HEADING
 
Title description, Dec 7, 2018
 
Image
 
Some text..
 
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
 
 
 
SECOND TITLE HEADING
 
Title description, Dec 7, 2018
 
Image
 
Some text..
 
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
 
 
 
 
 
Footer