Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Funktion für versteckte Elemente in JQuery

So implementieren Sie die Funktion für versteckte Elemente in JQuery

亚连Original: 2018-06-22 16:38:572222Durchsuche

In diesem Artikel werden hauptsächlich die jquery-Methode zum Ausblenden des Elements p durch Klicken auf das Leerzeichen und der Implementierungscode vorgestellt. Lassen Sie uns gemeinsam lernen.

Wenn wir Websites entwickeln, klicken wir oft auf die Leerstelle, um vorhandene Elemente, p oder andere Elemente auszublenden. Dieses Mal werde ich Ihnen beibringen, wie Sie mit jquery diesen besonderen Effekt erzielen.

Ein spezieller Effekt für eine jQuery-Webseite, der die Popup-Ebene ausblendet, wenn Sie auf die leere Stelle klicken, die Ebene einblendet, wenn Sie auf die Schaltfläche klicken, und die Popup-Ebene verschwindet, wenn Sie auf klicken Leerstelle der Seite. Die Hauptfunktion besteht darin, auf die Schaltfläche zu klicken, um die Popup-Ebene anzuzeigen, und dann auf eine beliebige Stelle auf der Seite zu klicken, um den Anzeigeeffekt der Popup-Ebene zu schließen. Dies ist hauptsächlich die Operationsanwendung von $ (document).click. Demo, Effekt-Quellcode:

CSS-Code:

* { 
  padding: 0; 
	margin: 0; 
}
#btnShow{ 
  margin: 100px auto 0; 
	width: 90px; 
	display: block; 
}
#pTop{ 
  border: 2px solid #666666; 
	position: absolute; display: none; 
	width: 400px; 
	height: 200px; 
	color: #333; 
	background: #efefef; 
	padding-top: 10px; 
	text-align: center; 
	font: 16px/30px "微软雅黑"; 
	margin-top: -105px; 
	margin-left: -200px; 
	left: 50%; 
	top: 50%;
 }

JS-Code:

 $(function () { 
   $(&#39;#btnShow&#39;).click(function (event) { 
     //取消事件冒泡 
     event.stopPropagation(); 
     //按钮的toggle,如果p是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
     $(&#39;#pTop&#39;).toggle(&#39;slow&#39;); 
		 return false;
   }); 
   //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
	 $(document).click(function(event){
		 var _con = $(&#39;#pTop&#39;);  // 设置目标区域
		 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
			//$(&#39;#pTop&#39;).slideUp(&#39;slow&#39;);  //滑动消失
			$(&#39;#pTop&#39;).hide(1000);     //淡出消失
		 }
	});
 })

HTML-Code:

<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<p id="pTop">
 点击空白区域弹出层关闭！
</p>
</body>

Nach dem Test erscheint beim Klicken auf die leere Stelle der Seite auf dem Mobiltelefon die Popup-Ebene wird geschlossen und schlägt fehl, und die Dokumentschreibmethode wird nicht unterstützt. Lösung: Sie können eine Hintergrundebene als leeres Seitenobjekt hinzufügen.

Klicken Sie auf die leere Stelle, um die Popup-Ebene auszublenden. Fall 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击空白处关闭弹出层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".btn").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }  
    $("#box").show();
  });
  $("#box").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  });
  document.onclick = function(){
    $("#box").hide();
  };
})
</script>
</head>
<body>
<p id="box"></p>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>
</html>

Lassen Sie mich den Code der Methode zum Ausblenden des p-Bereichs durch Klicken außerhalb des p-Bereichs mit Ihnen teilen js:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
} 
#myp
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="显示p" />
 
<p id="myp">
This is a p;
</p> 
</body> 
<script type="text/javascript">
　　　　var myp = $("#myp");
$(function ()
{
$("#btn").click(function (event) 
{
showp();//调用显示p方法
$(document).one("click", function () 
{//对document绑定一个影藏p方法
$(myp).hide();
}); 
event.stopPropagation();//阻止事件向上冒泡
});
$(myp).click(function (event) 
{
event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showp() 
{
$(myp).fadeIn();
}
</script>

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine einschichtige JSON-Sortierung in alphabetischer Schlüsselreihenfolge (ausführliches Tutorial)

Über die Verwendung von CLI in vue Absolutes Pfadreferenzproblem

So ändern Sie die Hintergrundfarbe der Ansichtsbeschriftung im WeChat-Applet

So setzen Sie den Anzeigemodus von Vue Print zurück Variablen (Ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion für versteckte Elemente in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json jquery css html JS 对象 iphone 微信小程序

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie den asynchronen Bild-Upload in JavascriptNächster Artikel：So implementieren Sie den asynchronen Bild-Upload in Javascript

In Verbindung stehende Artikel

Mehr sehen