Question

我正在制作网络应用程序。首先看这个图像：

现在，您可以看到黄线所示的区域。具有白色背景的列表是动态的（在搜索栏中键入内容时显示）。现在我想要的是当我点击此区域外的任何地方（搜索输入字段+列表）时，列表应为display: none。我已经尝试了一些东西，但为此我必须编写很多代码，因为我为不同的div分别编写了这些代码。

另外，我不想在这里粘贴整个代码，因为它太长了。所以我只是提供HTML来了解这张图片。

<header>
    <div id="headerdiv">
        <div class="headerlogo"><a href="/passwords/home.php"><img src="#" alt="Passwords"></a></div>
        <div class="quit"><img src="#" alt="Quit"></div>
    </div>
</header>
<div id="functions">
    <div id="funcLeft">
        <div id="addbuttonwrap"><input class="addbutton" type="button" value="  +              ADD"></div>
        <div class="heading1">Your saved passwords</div>
        <input class="funcbutton" type="button" value="EMAIL">
        <input class="funcbutton" type="button" value="CAREER">
        <input class="funcbutton" type="button" value="SOCIAL">
        <input class="funcbutton" type="button" value="OTHER">
    </div>
    <div id="funcRight">
        <div id="search">
            <form name="searchform" method="post" action="">
                <input type="text" name="searchinput" placeholder="Enter any keyword">
            </form>
        </div>
        <div class="heading1 heading2">GUIDELINES</div>
        <div class="slides">
            <!--CONTENT-->
        </div>
    </div>
</div>
<footer>
    <div id="footer">
        Copyright: Protected
    </div>
</footer>

注意：在写答案时，您可以为任何元素假设任何TAG名称/类/ ID等，因为代码不足。我只是想知道该怎么做。

Answer 1

您希望在有人点击时隐藏搜索，您可以使用带有onclick事件的Javascript执行此操作。

var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
    if(e.target != elementToHide){
        elementToHide.style.display = "none";
    }
}

当用户点击不这个元素时，这将隐藏elementToHide中包含的元素（可以是DOM中的任何元素）。

变量e包含click事件，我们在if

中检查目标元素

希望有所帮助

Answer 2

 $(document).on("click", function(e) {
    if(e.target.className != "search_element"){
       $("#element_list").hide();
    }
 });

你可以试试这个。

Answer 3

我认为你正在寻找一个免费的解决方案（或最简单的方法）。我个人建议在css中使用 + 和：focus 运算符

.search-with-submenu{
  .submenu{
    display: none;
  }
  input[type=search]:focus + .submenu{
    display: block;
  }
}

如何显示此区域：无？

3 个答案: