将Jquery slidetoggle代码转换为Javascript

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

 var $context = getContext(context);

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

---

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

HTML:

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

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转换中获得帮助，与javascript一起使用，这将使实现幻灯片效果更加容易。然后，我们只需要在javascript中更改高度，其余的就完成了

CSS:

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

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

Javascript:

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

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

编辑#2
正如桑德罗所指出的，上下文实际上并没有被隐藏，所以更新了小提琴并添加了

overflow-y:hidden并更改了文本颜色以显示可见性。
还将open改为slideOpen，因为open是一种保留字。
要将jqueryslideToggle（）重新实现（转换）为香草javascript，还需要重新实现jqueryslideUp（）和slideDown（）


var-dommanizations={
/**
*滑梯
*
*@param{HTMLElement}元素
*@param{Number}持续时间
*@returns{Promise}
*/
slideUp：函数（元素，持续时间=500）{
返回新承诺（功能（解决、拒绝）{
element.style.height=element.offsetHeight+'px'；
element.style.transitionProperty=`height，margin，padding`；
element.style.transitionDuration=持续时间+毫秒；
元素。远视；
element.style.overflow='hidden'；
element.style.height=0；
element.style.paddingTop=0；
element.style.paddingBottom=0；
element.style.marginTop=0；
element.style.marginBottom=0；
setTimeout（函数（）{
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'）；
决议（假）；
}，持续时间）
})
},
/**
*下滑
*
*@param{HTMLElement}元素
*@param{Number}持续时间
*@returns{Promise}
*/
向下滑动：函数（元素，持续时间=500）{
返回新承诺（功能（解决、拒绝）{
element.style.removeProperty（'display'）；
让display=window.getComputedStyle（元素）.display；
如果（显示==‘无’）
显示='块'；
element.style.display=显示；
让高度=元素。偏离视线；
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.style.transitionProperty=`height，margin，padding`；
element.style.transitionDuration=持续时间+毫秒；
element.style.height=高度+px；
element.style.removeProperty（'padding-top'）；
element.style.removeProperty（'padding-bottom'）；
element.style.removeProperty（'margin-top'）；
element.style.removeProperty（'margin-bottom'）；
setTimeout（函数（）{
element.style.removeProperty（'height'）；
element.style.removeProperty（'overflow'）；
element.style.removeProperty（'transition-duration'）；
element.style.removeProperty（'transition-property'）；
}，持续时间）
})
},
/**
*滑动切换
*
*@param{HTMLElement}元素
*@param{Number}持续时间
*@returns{Promise}
*/
滑动切换：功能（元素，持续时间=500）{
if（window.getComputedStyle（element.display=='none'）{
返回此.slideDown（元素，持续时间）；
}否则{
返回此.slideUp（元素，持续时间）；
}
}
}
// ------------------------------------------------------
document.addEventListener（“DOMContentLoaded”，function（））{
var button=document.getElementById（'slideToggle'）；
var cardElement=document.getElementById（'firstCard'）；
按钮。addEventListener（'click'，函数（事件）{
event.preventDefault（）；
domaniations.slideToggle（cardElement）；
});
});
*{
框大小：边框框；
}
/*添加带有一些填充的灰色背景色*/
身体{
字体系列：Arial；
填充：20px；
背景#f1f1；
}
/*标题/博客标题*/
.标题{
填充：10px；
字体大小：24px；
文本对齐：居中；
背景：白色；
}
/*创建两个相邻浮动的不相等列*/
/*左列*/
.leftcolumn{
浮动：左；
宽度：100%；
}
/*假象*/
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
/*为文章添加卡片效果*/
.卡片{
位置：相对位置；
背景色：白色；
填充：20px；
边缘顶部：20px；
}
#滑动切换{
背景色：#f9f5f5；
颜色：黑色；
边框：2个实心#a9b5a9；
填充物：5px；
边缘顶部：20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
光标：指针；
字体大小：粗体；
document.addEventListener("DOMContentLoaded", function () {
  const boton = document.getElementsByClassName("dropdown")[0];

  boton.addEventListener(
    "click",
    function (e) {
      if (
        window
          .getComputedStyle(e.target.nextElementSibling, null)
          .getPropertyValue("height") == "0px"
      ) {
        e.target.nextElementSibling.style.height = "300%";
      } else {
        e.target.nextElementSibling.style.height = "0%";
      }
    },
    false
  );
});

You Just need Vanilla Js to accomplish what you need, by the way Here is the laziest way

//i  hope this will solve your issue
<html lang="en-US">
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.1,shrink-to-fit=no">
     <link type="text/css" href="/css" rel="stylesheet">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <title>slideToggle</title>
        <style>
.toggle-navigation{
  transition: all .3s ease-in-out !important;
  margin:100px auto;
}
.toggle-content{
transition: all .3s ease-in-out !important;
}
 </style>
</head>
   <body>
    <div class="toggle navigation bg-primary w-25" id="toggle-nav" onclick = "toggleNavigation();">
     <p class="text-white text-center font-weight-bold">Click To Expand</p>
      <div class="toggle-content" id="toggle-content">
       <p class="text-white font-weight-bold text-justify">
Lorem Ipsum Dolor Sit Amet , Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet , Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet , Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet , Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet , Lorem Ipsum Dolor Sit Amet
         </p>
        </div>
       </div>
<script>
let toggleNav = document.getElementById('toggle-nav');
    navHeight = toggleNav.offsetHeight;
    content= document.getElementById('toggle-content');
    contentHeight = content.offsetTop - content.offsetTop;
    content.style.height = contentHeight;

    toggle = true ;
    function toggleNavigation(){
    if(toggle){
    content.style.height = navHeight;
    }else{
    content.style.height = contentHeight;
    }
    toggle = !toggle;
}
    </script>
   </body>
  </html>