如何在点击另一个 div 后隐藏一个 div

Question

我想在点击搜索图标后隐藏我的 div，它不是一个按钮所以我真的不知道该怎么做。我想隐藏此文本“

只需单击并输入您想要隐藏的位置的名称 访问

”BT点击.

<div id="intro"> 
            <p>Simply click on the &nbsp;<i class="fas fa-search"></i>&nbsp; and type the name of where you would like
                to visit</p>
            <div class="search-box">
                <input id="searchBox" type="text" placeholder="Search your location">
                <div class="search-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="cancel-icon">
                    <i class="fas fa-times"></i>
                </div>
                <div class="search-data"></div>
            </div>
        </div>

我尝试了一些 js 代码，但因为它不是一个按钮，所以我不确定它是否有效。

Answer 1

为此你需要使用点击事件https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

最好的方法是在你想要点击的元素上添加一个 id，然后这里是代码：

document.getElementById('foo').addEventListener('click', function (event) {
  document.getElementById('bar').style.display = 'none'
});

<div id="foo">Hide bar</div>
<div id="bar">Bar</div>

Answer 2

使用 Bootstrap 中的 Collabsible 来轻松快速地解决问题

Answer 3

你的问题有误会

如果你想隐藏任何元素，你可以通过它的ID或类名来选择它。在这里，我使用了类名。由于有两个具有相同类名的元素，我手动选择了第一个。 这是代码：

document.getElementsByClassName("fas fa-search")[0].hidden = true

Answer 4

<div id="intro"> 
            <p id="para">Simply click on the &nbsp;
 <i class="fas fa-search"></i>&nbsp; and type the name of where you would like
            to visit</p>
        <div class="search-box">
            <input id="searchBox" type="text" placeholder="Search your location">
            <div class="search-icon">
                <i class="fas fa-search"></i>
            </div>
            <div class="cancel-icon">
                <i class="fas fa-times"></i>
            </div>
            <div class="search-data"></div>
        </div>
    </div> <script>document.getElementsByClass('fas fa-search').addEventListener('click', 
 function (event) {
 document.getElementById('para').style.display = 'none'});

Answer 5

首先你需要给

<p>

和第二个搜索图标一个明确的类，这样你就可以在dom中选择它们：

<div id="intro">
  <p class="text">Simply click on the &nbsp;<i class="fas fa-search"></i>&nbsp; and type the name of where you would like to visit</p>
  <div class="search-box">
    <input id="searchBox" type="text" placeholder="Search your location">
    <div class="search-icon">
      <i class="fas fa-search search-icon"></i>
    </div>
    <div class="cancel-icon">
      <i class="fas fa-times"></i>
    </div>
    <div class="search-data"></div>
  </div>
</div>

然后对于 JS 部分，您首先需要选择该段落和第二个搜索图标：

const searchIcon = document.querySelector(".search-icon");
const text = document.querySelector(".text");

searchIcon.addEventListener("click", function() {
  text.classList.add("hide-text");
});

要真正隐藏文本，您需要添加一个 css 类：

.hide-text {
  display: none;
}