toggle(); จะเป็นคำสั่งมีลักษณะ เปิด - ปิดการแสดงผลสลับไปมา ต่างจาก hide(); จะปิดการแสดงผลอย่างเดียว เช่นเดียวกับ show(); ก็จะแสดงผลอย่างเดียว ค่ะ
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //เมื่อโหลดหน้าเพจให้คำสั่งนี้พร้อมใช้งานทันที่
var form = document.getElementById("frm") // รูปแบบ ประกาศตัวแปรที่ เอา id ของ form มา
$(form).hide(); //ในครั้งเเรกที่เปิดหน้านี้มา เราจะให้ form ถูกซ่อนไว้ก่อน โดยใช้คำสั่ง hide
$("button").click(function(){ // button คือ เเท็ก ที่เราจะให้เป็น ปุ่มเพื่อกด เเสดงผลของที่เราซ่อน เมื่อ click จะเรียกใช้งาน function
$(form).toggle(); // บอกว่า ตัวแปร ที่เราประกาศไว้ให้ทำงาน toggle คือ การเปิด-ปิด สลับการแสดงผล
});
});
</script>
</head>
<body>
<form action="index.php" id="frm">
<input type="text" name="input_name">
<input type="text" name="input_name">
<input type="submit" name="submit" >
</form>
<button>Toggle</button>
</body>
</html>
ครั้งเเรกของการ Run ไฟล์ตัวอย่างจะให้ทำการปิดการแสดงผลของ form ไว้ก่อน
- 2015-01-18_10-03-32.png (62.62 KiB) Viewed 1324 times
- 2015-01-18_10-04-01.png (61.05 KiB) Viewed 1324 times
- 2015-01-18_10-03-32.png (62.62 KiB) Viewed 1324 times