单击和滚动时隐藏/显示 div
[英]Hide/Show div on click and scroll
问题描述
I want to create a search form which is hidden and when we click the search icon that form appears and when user click away or scrolls the search form hides.
我想创建一个隐藏的搜索表单，当我们单击该表单出现的搜索图标时，当用户单击或滚动搜索表单时隐藏。
4 个解决方案
解决方案1
0 2022-12-25 08:38:38
You have to use.onclick event in js and change display and visibility property in a function.您必须在 js 中使用.onclick 事件并在函数中更改显示和可见性属性。 For example:例如：
document.getElementById("searchIcon").onclick = searchFunction
function searchFunction(){
const search = document.getElementById("searchForm");
search.style.display = "block";
search.style.visibility = "visible";
}
Of course, by default it should be hidden.当然，默认情况下它应该是隐藏的。 But display: none is not nesseccary, depends on your website.但是 display: none 不是必需的，取决于你的网站。
解决方案2
0 2022-12-25 08:40:52
Try this: Whenever you click on the image, "This is part of the div" appears in Red.试试这个：无论何时单击图像，“这是 div 的一部分”都会以红色显示。 Basically, you use Javascript to set/remove the hidden Attribute every time the user clicks the <img> item.基本上，每次用户单击<img>项目时，您都使用 Javascript 设置/删除hidden的属性。 Additionally, you change the <img> 's onclick Attribute to the opposite function( show_div()==>hide_div();hide_div()==>show_div() ):此外，您将<img>的onclick属性更改为相反的函数（ show_div()==>hide_div();hide_div()==>show_div() ）：
//see html on where to put this show_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag document.getElementById("search_div").removeAttribute("hidden"); document.getElementById("search_icon").setAttribute("onclick","hide_div()");} hide_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag document.getElementById("search_div").setAttribute("hidden","true"); document.getElementById("search_icon").setAttribute("onclick","show_div()");}
<.DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:01 Transitional//EN" "http.//www.w3.org/TR/html4/loose:dtd"> <html> <head> <title>Example Page</title> </head> <body> <img height="32" width="32" src="https.//cdn-icons-png.flaticon.com/512/3917/3917754.png" onclick="show_div()" id="search_icon"> <div id="search_div" hidden="true"> <font size=7 color="Red">This is part of the div</font> </div> <script type="text/javascript">//put the Javascript part here when copy-pasting this code </script> </body> </html>
You might want to take a look at the "hidden" attribute and the "click" event.您可能想看一下“隐藏”属性和“点击”事件。
解决方案3
0 2022-12-25 09:41:54
i am using addEventListener to get if any click is happened you can use any section of the on the place of document to make it work for that particular section.我正在使用addEventListener来获取是否发生任何点击，您可以使用文档的任何部分来使其适用于该特定部分。 ie: header即：标题
and then i am using classList.toggle to add and remove a particular class from the search input box.然后我使用classList.toggle在搜索输入框中添加和删除特定类。 you can add CSS as per your need.您可以根据需要添加 CSS。
<style>
.search-bar{
display:none;
}
</style>
<div>
<input class="search-bar" id="search-bar" type="text" placeholder="search...">
<i class="search-icon">🔍 </i></div>
<script>
var searchbox=document.querySelector("#search-bar");
var searchIcon=document.querySelector(".search-icon");
document.addEventListener("click",searchBar);
function searchBar(){
searchbox.classList.toggle("search-bar");
}
</script>
解决方案4
0
This jquery function worked for me这个 jquery function 对我有用
' '
$(document).ready(function(){
$(window).scroll(function(){
$("#search").fadeOut();
});
$("body").click(function(){
$("#search").fadeOut();
});
$("#btn").click(function(event){
event.stopPropagation();
$("#search").fadeToggle();
});
}); '
with this function when user scrolls the page the search bar will hide使用此 function，当用户滚动页面时，搜索栏将隐藏
below is a javascript version下面是一个 javascript 版本
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("scroll", function() {
document.getElementById("search").style.display = "none";
});
document.body.addEventListener("click", function() {
document.getElementById("search").style.display = "none";
});
document.getElementById("btn").addEventListener("click", function(event) {
event.stopPropagation();
var search = document.getElementById("search");
if (search.style.display === "none") {
search.style.display = "block";
} else {
search.style.display = "none";
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.