纯粹的JS中这个toggle脚本的等价物是什么？ [英] What is the equivalent of this toggle script in pure plain JS?

问题描述

这是为了通过按下按钮来隐藏和显示目标元素，如果您点击按钮或目标元素之外的任何内容，它也会隐藏不切换。所以我想知道如何将其转换为纯JS结构。我知道jQuery，但我需要将其转换为纯粹的JS。

This is designed to hide and show a targeted element by pressing the button and it also hides not toggle if you click on anything that is outside the button or the targeted element. So I want to know how I can convert this to a pure JS structure. I know jQuery but I need to convert this to pure plain JS.

<style>
  #ex{
    display: none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){ 
$('#ex').click(function(execute){
    execute.stopPropagation();
});
$('button').click(function(execute) {
    execute.preventDefault();
    execute.stopPropagation();
    $('#ex').toggle();
});
$(document).click(function() {
    $('#ex').hide();
});
    });
</script>
<button>Toggle</button>
<h1 id='ex'>Blablablablabla bla bla JS</h1>

我是什么尝试过：



我已经在其他网站上询问了这个问题，甚至堆栈溢出但我没有工作或尝试过的答案，我甚至谷歌这个但没有成功。

What I have tried:

I have asked this on other sites and even on stack overflow but no working or attempted answers from people I even google this but with no success.

推荐答案

（document）.ready（function（）{

(document).ready(function(){

（'＃ex'）。click（function） （执行）{
execute.stopPropagation（）;
}）;

('#ex').click(function(execute){ execute.stopPropagation(); });

（'button'）。click（function（execute）{
execute .preventDefault（）;
execute.stopPropagation（）;

('button').click(function(execute) { execute.preventDefault(); execute.stopPropagation();

这篇关于纯粹的JS中这个toggle脚本的等价物是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！