jquery toggle()方法結構改變

阿新 • • 發佈：2019-01-21

學習到一個toggle()方法，告訴我語法結構是:

toggle(fn1,fn2,...fnN);

便嘗試寫了一個小demo，出現了問題

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
#panel{
	background: #CCC;
	font-size: 23px;
	font-style: bold;
	text-align: center;
	margin: 100px 100px;
}
#panel div.content{
	display: none;
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
//jquery合成事件---toggpe()方法
$(function() {
	$("#panel h5.head").toggle(function() {
		$(this).next().show();
	}, function() {
		$(this).next().hide();
	});
	
});
</script>
<body>
	<div id="panel">
		<h5 class="head">什麼是胡蘿北？</h5>
		<div class="content">
			胡蘿北是菜餅的伴侶，是其生命中不可或缺的一種精神寄託。
		</div>
	</div>
</body>
</html>

觀察到jquery部分的程式碼：

$(function() {
	$("#panel h5.head").toggle(function() {
		$(this).next().show();
	}, function() {
		$(this).next().hide();
	});
	
});

語法沒有任何問題，卻出現了開啟頁面直接把標題元素以及內容元素全部隱藏掉了

和我想要實現的點選標題開啟內容，再次點選標題隱藏內容完全不一致。

通過查閱jquery官方的api發現了問題的所在：

這個語法結構已經在新的jquery版本中移出掉了

實現上述需求更簡便了，更改程式碼如下：

$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().toggle();
	});	
});

可實現想要的需求了。

甚至可以控制點選標題後現實內容的速度，

比如緩慢顯示出內容及緩慢隱藏內容：

$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().toggle("slow");
	});	
});

附：其他實現的效果完整程式碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
#panel{
	background: #CCC;
	font-size: 23px;
	font-style: bold;
	text-align: center;
	margin: 100px 100px;
}
#panel div.content{
	display: none;
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
/*$(function(){
	$("#panel h5.head").bind('click', function() {
		var $content = $(this).next();
		$content.is(':visible')?$content.hide():$content.show();
	});
});*/
/*//滑鼠移入移出程式碼
$(function(){
	$("#panel h5.head").bind('mouseover', function() {
		$(this).next().show();
	}).bind('mouseout',function(){
		$(this).next().hide();
	});
})*/
/*//jq合成事件----hover方法
$(function() {
	$("#panel h5.head").hover(function() {
		$(this).next().show();
	}, function() {
		$(this).next().hide();
	});
});*/
//jquery合成事件---toggpe()方法
$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().toggle();
	});
	
});
</script>
<body>
	<div id="panel">
		<h5 class="head">什麼是胡蘿北？</h5>
		<div class="content">
			胡蘿北是菜餅的伴侶，是其生命中不可或缺的一種精神寄託。
		</div>
	</div>
</body>
</html>

再附一個實現點選標題高亮效果程式碼：

先定義一個CSS高亮樣式:

.highlight{
	background: #FF3300;
}

jquery程式碼實現如下：

$(function() {
	$("#panel h5.head").click(function() {
		if($(this).hasClass('highlight')){
			$(this).removeClass('highlight').next().toggle();
		}
		else
		{
			$(this).addClass('highlight').next().toggle();
		}
	});
});

jquery toggle()方法結構改變

學習到一個toggle()方法，告訴我語法結構是: toggle(fn1,fn2,...fnN); 便嘗試寫了一個小demo，出現了問題<!DOCTYPE html> <html> <head> <meta

jQuery中toggle方法實現切換

首先定義myToggle 方法: $.prototype["myToggle"] = function () { var args = arguments; var that = this; var i = 0; var n =

jQuery的兩個合成事件---hover()方法和toggle()方法

1.hover()方法語法結構為：hover(enter,leave); 該方法用於滑鼠的懸停事件，當游標移動到元素上時，會觸發第一個函式（enter），當游標移除這個元素時，會觸發第二個函式（leave） $(function(){ $('div').ho

用jQuery的toggle方法實現元素的左右滑動隱藏

通常情況下給元素加toggle方法通常會是上下滑動隱藏，而有時我們又需要左右滑動隱藏怎麼辦呢？ JS片段： $(document).ready(function(){ $('#example

jquery中toggle()方法的使用（隱藏與顯示的切換）

使用方法： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t

jQuery中toggle()方法、toggleClass()方法

定義和用法toggle() 方法用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。該方法也可用於切換被選元素的 hide() 與 show()向 Toggle 事件繫結兩個或更多函式當指定元素被點選時，在兩個或多個函式之間輪流切換。如果規定了兩個以上的函式，則 toggle() 方法

jquery $.fn方法

highlight log doc mar function brush cnblogs func document <script type="text/javascript"> $(function(){ $.fn.pop=function(){

AlertDialog自己定義View的使用方法+怎樣改變彈出框的大小

true .net put med ng- hit con .sh 技術 android系統定義了彈出框，支持我們自己定義布局: public AlertDialog getEditCustomDialog() { LayoutInflater inflater

Javascript - Jquery - 常用方法

一次出現屬性節點 posit 查找布爾 nbsp 上一個 log 常用方法（Common Method）類名方法 addClass(className) className是css類名，為該對象指定或增加一個類名，返回該對象。 removeClass(c

Jquery hover方法使用及 mouseenter與mouseleave和 mouseover與mouseout的區別

-m cto 1.8 一個 lec jquer href event handle 定義和用法 hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。 jQuery 1.7 版本前該方法觸發 mouseenter 和 mouseleave 事件。 jQuer

Jquery on方法綁定事件後執行多次

cnblogs clas cli func jquery on col log () fun $("#btnOktcHc").on("click", function () {}); $("#btnOktcHc").off("click"); on 對同一個元素

jquery 常用方法集錦

() tran 切換 param 顯示 lan bsp text 追加 JQuery常用方法　　1、獲取元素　　　　$("標簽名")、$("#id")、$(".類名")、$("標簽名,#id,.class") 　　　　$("祖先子孫")、$("父>子")、$("

jQuery delay() 方法

ade 點擊 scrip 描述 stat spl htm fas doc 定義和用法 delay() 方法對隊列中的下一項的執行設置延遲。語法 $(selector).delay(speed,queueName) 參數描述 speed 可選。規定延遲的速度。

jQuery on()方法

tip rom function inpu child ack += toggle mar 原文鏈接：http://caibaojian.com/jquery-on.html jQuery on()方法是jQuery官方推薦的一個函數，替換live、bind、delega

Java程序猿的JavaScript學習筆記（9—— jQuery工具方法）

article 順序還要並且 defined this ont property plain 計劃按例如以下順序完畢這篇筆記： Java程序猿的JavaScript學習筆記（1——理念） Java程序猿的JavaScript學習筆記（2——屬性

jquery attr()方法

操作 fin 註意沒有屬性。指定節點 style 3.1 在JS中設置節點的屬性與屬性值用到setAttribute(),獲得節點的屬性與屬性值用到getAttribute(),而在jquery中，用一個attr()就可以全部搞定了,贊一個先 ^^jquery中用a

jQuery hover() 方法 -《狗嗨默示錄》-

ack 背景 inf pri pan func seo 改變 target jQuery hover() 方法實例當鼠標指針懸停在上面時，改變 <p> 元素的背景顏色： $("p").hover(function(){ $("p").css("bac

jQuery slideToggler() 方法 -《狗嗨默示錄》-

效果 select tar 進行 run ext tro lin cts jQuery slideToggle() 方法 jQuery 效果方法實例在所有 <p> 元素上進行 slideUp() 和 slideDown() 之間的切換： $("butto

jquery checkbox選中、改變狀態、change和click事件

document browser clas als true bsp 賦值函數返回 checkbox jquery判斷checked的三種方法:.attr(‘checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:tr

擴展jQuery的方法

find val ror turn clas cti else bsp 等等備忘用的: (function ($) { $.extend($.fn, { clearError : function () { if

jquery toggle()方法結構改變

相關推薦