Javascript 快速/基本问题-隐藏/显示切换（Java脚本）_Javascript_Html_Hide

Javascript 快速/基本问题-隐藏/显示切换（Java脚本）

javascript html

Javascript 快速/基本问题-隐藏/显示切换（Java脚本）,javascript,html,hide,Javascript,Html,Hide,我有一个基本问题，我想有人可能很容易回答。我有很少的编码经验，但只需要一个简单的改变，以完成我的网站制作我有一个与我使用的示例类似的简单切换： #myDIV{ 宽度：100%；填充：50px0；文本对齐：居中；背景颜色：浅蓝色；边缘顶部：20px； } 试试看这是我的DIV元素。函数myFunction（）{ var x=document.getElementById（“myDIV”）；如果（x.style.display==“无”）{ x、 style.display=“b

我有一个基本问题，我想有人可能很容易回答。我有很少的编码经验，但只需要一个简单的改变，以完成我的网站制作

我有一个与我使用的示例类似的简单切换：


#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
试试看
这是我的DIV元素。
函数myFunction（）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

您应该获得常规DOM并反转函数，如：单击div，显示块else显示none。


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #myDIV {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: lightblue;
            margin-top: 20px;

            /*display: none;*/
        }
    </style>
</head>
<body>


<text onclick="myFunction()">Try it</text>

<!--you have to add display property and the default value of it will be none-->
<!--you can add this to the style directly-->
<div id="myDIV" style="display: none">
    This is my DIV element.

    <!--for adding a link you have to use <a href="<the link here>"></a> like this-->
    <a href="https://google.com" id="link">Hello google</a>
</div>


<script>
  function myFunction() {
    const x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  // this event will run when your left mouse down
  document.addEventListener("mousedown", (event) => {
    // check if the event target is not the element with id of [myDIV]
    // check if the event target is not the element with id of [link] cus when you click on the link the target will be link element
    if (event.target.id !== "myDIV" && event.target.id !== "link") {
      const x = document.getElementById("myDIV");
      x.style.display = "none";
    }
  });
</script>

</body>
</html>

#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
/*显示：无*/
}
试试看
这是我的DIV元素。
函数myFunction（）{
const x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
//当鼠标左键按下时，此事件将运行
document.addEventListener（“鼠标下移”，（事件）=>{
//检查事件目标是否不是id为[myDIV]的元素
//单击链接时，检查事件目标是否不是id为[link]cus的元素。目标将是链接元素
if（event.target.id！=“myDIV”&&event.target.id！=“link”）{
const x=document.getElementById（“myDIV”）；
x、 style.display=“无”；
}
});


#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
/*显示：无*/
}
试试看
这是我的DIV元素。
函数myFunction（）{
const x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
//当鼠标左键按下时，此事件将运行
document.addEventListener（“鼠标下移”，（事件）=>{
//检查事件目标是否不是id为[myDIV]的元素
//单击链接时，检查事件目标是否不是id为[link]cus的元素。目标将是链接元素
if（event.target.id！=“myDIV”&&event.target.id！=“link”）{
const x=document.getElementById（“myDIV”）；
x、 style.display=“无”；
}
});

添加一个

hide

类以隐藏

myDIV

。这将使隐藏和显示div变得更容易。然后，让窗口处理单击而不是按钮：

var x=document.getElementById（“myDIV”）；
var y=document.getElementById（“myBtn”）
window.addEventListener（“单击”，函数（e）{
如果（e.target！=x&&e.target！=y）{
x、 添加（“隐藏”）；
}否则如果（e.target==y）{
x、 切换（“隐藏”）；
}
});
#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
#myDIV.hide{
显示：无；
}
试试看
这是我的DIV元素。
添加一个hide
类以隐藏myDIV
。这将使隐藏和显示div变得更容易。然后，让窗口处理单击而不是按钮：

var x=document.getElementById（“myDIV”）；
var y=document.getElementById（“myBtn”）
window.addEventListener（“单击”，函数（e）{
如果（e.target！=x&&e.target！=y）{
x、 添加（“隐藏”）；
}否则如果（e.target==y）{
x、 切换（“隐藏”）；
}
});
#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
#myDIV.hide{
显示：无；
}
试试看
这是我的DIV元素。
看看这个片段，我觉得它解决了您的用例
 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>



  <text onclick="myFunction()">Try it</text>

  <div id="myDIV">
    This is my DIV element.
  </div>


  <script>
    window.onload = function () {
      var x = document.getElementById("myDIV");
      x.style.display = "none"
      document.onclick = function (e) {
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      };
    };


  </script>

</body>

</html>


#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
试试看
这是我的DIV元素。
window.onload=函数（）{
var x=document.getElementById（“myDIV”）；
x、 style.display=“无”
document.onclick=函数（e）{
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
};
};
看看这个片段，我觉得它解决了您的用例
 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>



  <text onclick="myFunction()">Try it</text>

  <div id="myDIV">
    This is my DIV element.
  </div>


  <script>
    window.onload = function () {
      var x = document.getElementById("myDIV");
      x.style.display = "none"
      document.onclick = function (e) {
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      };
    };


  </script>

</body>

</html>


#myDIV{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
试试看
这是我的DIV元素。
window.onload=函数（）{
var x=document.getElementById（“myDIV”）；
x、 style.display=“无”
document.onclick=函数（e）{
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
};
};
您应该监听元素外部的任何鼠标单击。为了做到这一点，请在这里检查这个问题：您应该监听元素外部的任何鼠标点击。为了做到这一点，请在这里检查这个问题：谢谢。你能告诉我这是如何写在上面的代码？我真的没有什么经验……欢迎来到SO！请阅读这篇文章，谢谢。你能告诉我这是如何写在上面的代码？我真的没有什么经验……欢迎来到SO！请阅读这篇文章，非常感谢！这看起来很棒。唯一的问题是div显示