สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
jquery เมนู accordion

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery เมนู accordion

ดูแล้ว 15,927 ครั้ง


CSS Code

<style type="text/css">  
/* สร้าง css class ชื่อ iTopic สำหรับ หัวข้อเมนู */
.iTopic{
	font-size:12px;
	display:block;
	float:left;
	height:22px;
	font-weight:bold;
	color:#333;
	padding-left:25px;
	padding-bottom:3px;
	line-height:18px;
	cursor:pointer;
	width:400px;
	clear:both;
	border:1px solid #CCCCCC;
}
/* สร้าง css class ชื่อ iDetail สำหรับ รายละเอียด */
.iDetail{
	font-size:12px;
	display:none;
	clear:both;
	float:left;
	font-weight:normal;
	color:#333333;
	padding-left:25px;
	padding-bottom:10px;
	line-height:18px;
	background-color:#E9EFEF;
	width:400px;
}
</style>  

HTML Code

<div class="iMenu">
<span class="iTopic">หัวข้อทดสอบที่ 1</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1
รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1</label>
<span class="iTopic">หัวข้อทดสอบที่ 2</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2
รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2</label>
<span class="iTopic">หัวข้อทดสอบท3</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3
รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3</label>
<span class="iTopic">หัวข้อทดสอบที่ 4</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4
รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4</label>
</div>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">   
$(function(){   
    $("span.iTopic").click(function(){   
			$(this).next("label.iDetail").slideToggle("fast");
			$(this).next("label.iDetail").siblings("label").slideUp('fast');
    });   
});   
</script> 

ตัวอย่างผลลัพธ์

หัวข้อทดสอบที่ 1 หัวข้อทดสอบที่ 2 หัวข้อทดสอบท3 หัวข้อทดสอบที่ 4



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ