与jQuery toggle（）等价的Javascript ES6？

这个jQuery

toggle（）

函数工作得很好。在香草javascript（首选ES6）中执行相同操作的良好实践是什么

你可以这样做

var show=函数（elem）{
elem.style.display='block'；
};
变量隐藏=函数（元素）{
elem.style.display='none'；
};
变量切换=功能（元素）{
//如果该元素可见，请将其隐藏
if（window.getComputedStyle（elem.display=='block'）{
隐藏（元素）；
返回；
}
//否则，请出示它
表演（元素）；
};
//侦听单击事件
document.addEventListener（'click'，函数（事件）{
//确保单击的元素是我们的切换
如果（！event.target.classList.contains（'toggle'））返回；
//防止默认链接行为
event.preventDefault（）；
//获取内容
var content=document.querySelector（event.target.hash）；
如果（！content）返回；
//切换内容
切换（内容）；
}，假）


下面是一些我们想要切换可见性的文本。让我们做吧！
如果signUpForm和loginForm是ID，则可以尝试以下操作：

document.getElementById('sign_up_btn').addEventListener('click', function(){
  elToggle();
});

document.getElementById('login_btn').addEventListener('click', function(){
  elToggle();
});

function elToggle(){
  var s = document.getElementById('signUpForm');
  if (s.style.display == "none") {
    s.style.display = "block";
  } else {
    s.style.display = "none";
  }

  var l = document.getElementById('loginForm');
  if (l.style.display == "none") {
    l.style.display = "block";
  } else {
    l.style.display = "none";
  }
}

本机切换
类可以通过以下方式进行本机切换：


const button=document.querySelector（'sign#u btn'）；
addEventListener（'click'，e=>{
document.querySelector（'.content'）.classList.toggle（'hide'））
})
.hide{
显示：无；
}
切换
切换此内容
您可以执行以下操作：

注意：CSS只是为了我们可以在这里测试


document.getElementById（'sign_btn'）。addEventListener（'click'，（）=>{
var signUpForm=document.getElementById（'signUpForm'）；
var loginForm=document.getElementById（'loginForm'）；
if（window.getComputedStyle（signUpForm.display==“block”）{
signUpForm.style.display=“无”；
loginForm.style.display=“block”；
}否则{
signUpForm.style.display=“block”；
loginForm.style.display=“无”；
}
});
#注册表格{
位置：相对位置；
浮动：左；
背景色：#09f；
宽度：100px；
高度：100px；
显示：块；
右边距：20px；
}
#登录表单{
位置：相对位置；
浮动：左；
背景色：#f00；
宽度：100px；
高度：100px；
显示：无；
}
#注册{
位置：相对位置；
浮动：左；
右边距：20px；
}

报名表
登录表单
Font:
document.getElementById('sign_up_btn').addEventListener('click', function(){
  elToggle();
});

document.getElementById('login_btn').addEventListener('click', function(){
  elToggle();
});

function elToggle(){
  var s = document.getElementById('signUpForm');
  if (s.style.display == "none") {
    s.style.display = "block";
  } else {
    s.style.display = "none";
  }

  var l = document.getElementById('loginForm');
  if (l.style.display == "none") {
    l.style.display = "block";
  } else {
    l.style.display = "none";
  }
}