我想做一个关闭的 Div 框，但不知道如何答案

【问题标题】：I'd like to make a closing Div box but don't know how我想做一个关闭的 Div 框，但不知道如何
【发布时间】：2020-04-12 02:42:55
【问题描述】：

我有这个 div 框（在拐角处还有另一个 div 框供 x 容纳），我想要的是当您单击 x 框时，div 会关闭/消失。这段代码只是 div 框的基本结构，我在 YouTube 上找不到任何有用的教程来满足我的需求。如果有人可以提供帮助，那就太好了！

HTML：

  <div id = "character-info">
  <div id = "x-box">
    <div id = "x-close"> X
      </div>
   </div>
</div>

CSS：

    #character-info {
  margin-left: 300px;
  padding-left: 300px;
  margin-top: 50px;
  width: 350px;
  height: 500px;
  border: black 1px solid;
  background-color: orange;
}

#x-box {
  margin-left: 308px;
  width: 40px;
  height: 40px;
  border: black 1px solid;
  margin-top: -1px;
  background-color: blue;
}

#x-close {
  margin-left: 13px;
  padding-top: 6px;
  width: 20px;
  height: 20px;
  font-size: 25px;
  position: absolute;
  color: white;
}

我相信我需要将 X 框变成一个按钮，对吗？然后添加一种关闭方式。

【问题讨论】：

你为什么不试试javascript？
我还是 JavaScript 新手，所以我不知道我能用 JavaScript 做到这一点
我建议你看看 Jquery
JavaScript 和 JQuery 有什么区别？
@Ten，看看这个纯JS解决方案..codepen.io/Maniraj_Murugan/pen/LYpVPza

标签： html css

【解决方案1】：

我想要的是，当您单击 x 框时，div 会关闭/消失。

为此，您需要使用一些原生 javascript 与您的 html 和 css 交互。

首先你需要获取你将要与之交互的两个 html 元素

// get the main box element
const mainBox = document.querySelector('#character-info')

//get the x-box element
const xBox = document.querySelector("#x-box")

一旦你有了你的元素，你就可以通过控制台记录它们来测试它们被正确“抓取”的位置

在您验证您的 HTML 元素在您的 vanilla JS 中被选中后，您必须向 x-box 元素添加一个点击事件侦听器，并创建一个函数来修改主容器内的 css。

// add a click event handler to x-box
xBox.onclick = () => {
  console.log('click check')
  // set main box display to none to hide main box when x-box is clicked
  mainBox.style.display = "none";
}

这是一个工作示例： https://codepen.io/marguelgtz/pen/mdeJbMd

这是同一过程的单行示例

document.querySelector("#x-box").onclick = () => document.querySelector('#character-info').style.display = "none";

【讨论】：

【解决方案2】：

jQuery 非常适合做这样的事情！你需要链接 jQuery JavaScript 文件和 theeeen ...

$( "#x-close" ).click(function() {
  $( "#character-info" ).hide();
});

您从按钮中选择ID，添加点击功能，然后您可以通过此点击隐藏整个框。

您可以阅读 jQuery 文档以了解更多信息。

希望对您有所帮助。 :)

$( "#x-close" ).click(function() {
  $( "#character-info" ).hide();
});

#character-info {
  margin-left: 300px;
  padding-left: 300px;
  margin-top: 50px;
  width: 350px;
  height: 500px;
  border: black 1px solid;
  background-color: orange;
}

#x-box {
  margin-left: 308px;
  width: 40px;
  height: 40px;
  border: black 1px solid;
  margin-top: -1px;
  background-color: blue;
}

#x-close {
  margin-left: 13px;
  padding-top: 6px;
  width: 20px;
  height: 20px;
  font-size: 25px;
  position: absolute;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "character-info">
  <div id = "x-box">
    <div id = "x-close"> X
      </div>
   </div>
</div>

【讨论】：

非常感谢您抽出宝贵时间回答，非常感谢！
@Anna_B，这条评论是什么意思？您也没有提供有关解决方案的任何解释.. 看看stackoverflow.com/help/how-to-answer

【解决方案3】：

$("#x-box").click(function(){
$("#character-info").css({'display':'none'})
})

#character-info{
margin-left: 300px;
  padding-left: 300px;
  margin-top: 50px;
  width: 350px;
  height: 500px;
  border: black 1px solid;
  background-color: orange;
}

#x-box {
  margin-left: 308px;
  width: 40px;
  height: 40px;
  border: black 1px solid;
  margin-top: -1px;
  background-color: blue;
}

#x-close {
  margin-left: 13px;
  padding-top: 6px;
  width: 20px;
  height: 20px;
  font-size: 25px;
  position: absolute;
  color: pink;
}

<html>
<body>
<div id = "character-info">
  <div id = "x-box">
    <div id = "x-close"> X
      </div>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

【讨论】：