DOM案例分享—jQ实现点击任意位置关闭某处的效果
Javascript学习中DOM的实战，jQ实现点击任意位置关闭某处的效果（常用于模态框后面的遮罩层）
点击任意位置关闭某处
而且点击对应处并不会hide掉自己
原理
//点击文档任意处都触发该事件$(document).mousedown(function(e){
//只有当某对象存在时才会有的点击任意处出现的事件效果
if($(e.target).parents(".search").length==0){
$("xxx").slideToggle(300);//显示隐藏
}
})下列网页实战中我取出部分，因此最后看起来样式可能不相同。
其中思想是
//点击文档任意处都触发该事件$(document).mousedown(function(e){
if(想要显示的对象如果是在显示状态时才有以下的触发效果){ //只有当某对象存在时才会有的点击任意处出现的事件效果
if($(e.target).parents(".search").length==0){
$("xxx").slideToggle(300);//显示隐藏
}
}
})效果
代码
html部分
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>backspacing</title>
<style type="text/css">
html{ background: #666; }
.topList{ float: right; margin-right: 36px; list-style: none; }
.topList li{ float: left; height: 35px; line-height: 35px; text-align: center; }
.topList a{ color: #fff; }
.topList a:active, .topList a:focus, .topList a:hover{ color: #fff; text-decoration: none; }
.searchBtn{ position: absolute; right: 0; top: 3px; width: 35px; height: 35px; }
.searchBtn img{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; display: block; }
.search{ display: none; position: absolute; right: 0; top: 0; width: 190px; height: 35px; }
.search input{ position: absolute; right: 0px; top: 0px; width: 100%; height: 31px; border:0; border-bottom: 1px solid #fff; background: #89C997; color: #fff !important; padding-right:30px; }
.search input::-webkit-input-placeholder{ color: #fff; }
.search input::-moz-placeholder{ color: #fff; }
.search input::-ms-input-placeholder{ color: #fff; }
.search input::-moz-placeholder{ color: #fff; }
.search a{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; border-radius: 25px; }
.search img{ width: 16px; height: 16px; }
</style></head><body><ul class="topList">
<li><a href="javascript:alert('敬请期待')!">理工首页 | </a></li>
<li><a href="javascript:alert('敬请期待')!">收藏本页 | </a></li>
<li><a href="javascript:alert('敬请期待')!">English</a></li></ul><a href="javascript:alert('敬请期待')!" class="searchBtn"><img src="search.png" alt=""></a><p class="search">
<form action="">
<input type="text" placeholder="请输入相关搜索内容">
<a href="javascript:alert('敬请期待')!"><img src="search.png" alt=""></a>
</form></p>
<script src="../jquery.min.js"></script>
<script src="backspacing.js"></script></body></html>js部分
// 搜索框的出现&&隐藏$(".searchBtn").click(function(){
$(".searchBtn").slideToggle(300);
$(".search").slideToggle(300);
$(".topList").slideToggle(100);
});
$(document).mousedown(function(e){
if(!($(".search").is(":hidden"))){ if($(e.target).parents(".search").length==0){
$(".searchBtn").slideToggle(300);
$(".search").slideToggle(300);
$(".topList").slideToggle(100);
}
}else{ return false;
}
})相关文章：
JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码
相关视频：
Atas ialah kandungan terperinci DOM案例分享—jQ实现点击任意位置关闭某处的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1672
14
1428
52
1332
25
1276
29
1256
24
Apakah maksud vue dom?
Dec 20, 2022 pm 08:41 PM
DOM ialah model objek dokumen dan antara muka untuk pengaturcaraan HTML dalam halaman dimanipulasi melalui DOM. DOM ialah perwakilan objek dalam memori bagi dokumen HTML, dan ia menyediakan cara untuk berinteraksi dengan halaman web menggunakan JavaScript. DOM ialah hierarki (atau pokok) nod dengan nod dokumen sebagai akarnya.
Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya
May 12, 2023 pm 01:28 PM
DOM pengikat Vue3ref atau penerangan senario analisis sebab kegagalan komponen Dalam Vue3, ia sering digunakan untuk menggunakan ref untuk mengikat komponen atau elemen DOM Banyak kali, ref digunakan dengan jelas untuk mengikat komponen berkaitan, tetapi pengikatan ref sering gagal. Contoh situasi kegagalan pengikatan ref Sebilangan besar kes di mana pengikatan ref gagal ialah apabila ref diikat pada komponen, komponen itu belum lagi diberikan, jadi pengikatan gagal. Atau komponen tidak diberikan pada permulaan dan ref tidak terikat Apabila komponen mula membuat, ref juga mula terikat, tetapi pengikatan antara ref dan komponen tidak selesai apabila menggunakan kaedah berkaitan komponen. Komponen terikat kepada ref menggunakan v-if, atau komponen induknya menggunakan v-if untuk menyebabkan halaman tersebut
Apakah cara untuk mendapatkan nod DOM dalam Vue3
May 11, 2023 pm 04:55 PM
1. Native js mendapat nod DOM: document.querySelector (pemilih) document.getElementById (pemilih id) document.getElementsByClassName (pemilih kelas).... 2. Dapatkan objek contoh komponen semasa dalam vue2: kerana setiap vue Setiap contoh komponen mengandungi objek $refs, yang menyimpan rujukan kepada elemen atau komponen DOM yang sepadan. Jadi secara lalai, $refs komponen menghala ke objek kosong. Mula-mula anda boleh menambah ref="name" pada komponen, dan kemudian lulus ini.$refs.
Apakah objek dom dan bom?
Nov 13, 2023 am 10:52 AM
Terdapat 5 objek DOM termasuk "dokumen", "elemen", "Nod", "Acara" dan "Tetingkap" 2. "tetingkap", "navigator", "lokasi" dan "sejarah" dan "skrin" dan 5 lain; objek BOM.
Panduan manipulasi DOM dalam PHP
May 21, 2023 pm 04:01 PM
Dalam pembangunan web, DOM (DocumentObjectModel) adalah konsep yang sangat penting. Ia membolehkan pembangun mengubah suai dan mengendalikan dokumen HTML atau XML halaman web dengan mudah, seperti menambah, memadam, mengubah suai elemen, dsb. Pustaka operasi DOM terbina dalam dalam PHP juga menyediakan pembangun dengan fungsi yang kaya Artikel ini akan memperkenalkan panduan operasi DOM dalam PHP, dengan harapan dapat membantu semua orang. Konsep asas DOM DOM ialah merentas platform, API bebas bahasa yang boleh
Apakah perbezaan antara bom dan dom
Nov 13, 2023 pm 03:23 PM
BOM dan DOM berbeza dari segi peranan dan fungsi, hubungan dengan JavaScript, saling bergantung, keserasian penyemak imbas yang berbeza dan pertimbangan keselamatan. Pengenalan terperinci: 1. Peranan dan fungsi Fungsi utama BOM adalah untuk mengendalikan tetingkap penyemak imbas Ia menyediakan akses terus dan kawalan tetingkap penyemak imbas, manakala fungsi utama DOM adalah untuk menukar dokumen web menjadi pokok objek. pembangun untuk Mendapatkan dan mengubah suai elemen dan kandungan halaman web melalui pepohon objek ini 2. Hubungan dengan JavaScript, dsb.
Apakah objek terbina dalam DOM?
Dec 19, 2023 pm 03:45 PM
dom内置对象有：1、dokumen；2、tingkap；3、navigator；4、lokasi；5、sejarah；6,skrin；7,dokumen.dokumen .title；11、document.cookie。
Apa yang dom dan bom capai?
Nov 20, 2023 pm 02:28 PM
DOM membolehkan akses dinamik dan kemas kini kepada kandungan halaman web, manakala BOM menyediakan API untuk berinteraksi dengan tetingkap penyemak imbas, termasuk mengawal tingkah laku penyemak imbas dan mendapatkan maklumat tentang pelayar dan persekitaran pengguna DOM digunakan terutamanya untuk mengendalikan kandungan halaman web mengendalikan tetingkap penyemak imbas dan berinteraksi dengan penyemak imbas bersama-sama membentuk asas penting dalam pembangunan bahagian hadapan Web, menyediakan pembangun kaedah yang kaya untuk mengawal dan mengendalikan halaman web dan pelayar untuk mencapai interaktiviti yang kukuh, aplikasi Web dengan pengalaman pengguna yang baik.
