บทช่วยสอน มูลนิธิยุบรายการ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
ผลหีบเพลง,
มูลนิธิยุบรายการ
เมื่อคุณต้องการที่จะซ่อนส่วนหนึ่งของการแสดงผลให้คุณสามารถยุบรายการ
ตัวอย่าง
<ul class = "หีบเพลง" ข้อมูล -accordion>
<ระดับ Li = "หีบเพลงนำทาง ">
<A href = "#demo"> ง่ายพับ </ a>
<div id = "สาธิต" ชั้น = "เนื้อหา">
กวดวิชานี้ - วิทยาศาสตร์ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน! ! !
</ div>
</ li>
</ ul>
<! - เริ่มต้นมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง» ตัวอย่างของการวิเคราะห์
.accordion ชั้นเรียนและ data-accordion แอตทริบิวต์ที่ถูกใช้ในการสร้างองค์ประกอบพับ .accordion-navigation ชั้นใช้เพื่อแสดงองค์ประกอบพับ ที่เกิดขึ้นจริงเนื้อหา .content ระดับ (<div class = "เนื้อหา" ) และคลิกที่ปุ่มเพื่อแสดงอย่างใดอย่างหนึ่ง
เราได้เพิ่มให้กับรายการรายการ <a> องค์ประกอบในการควบคุม (แสดง / ซ่อน) เดอะพับ แล้วยึดเชื่อมโยงกับเนื้อหาพับกับ ID เนื้อหาเดียวกัน (<a href=#demo" 与<div id="demo"> ที่เกี่ยวข้อง)
หมายเหตุ: ผลการพับจะต้องมีการเริ่มต้นมูลนิธิ JS
โดยค่าเริ่มต้นเนื้อหาพับถูกซ่อนอยู่ ที่เราสามารถทำได้ใน <div> ก่อนหน้า .active ระดับที่ได้รับอนุญาตที่จะเริ่มต้นการแสดงผล:
ตัวอย่าง
<div id = "สาธิต" ชั้น = "เนื้อหาที่ใช้งาน">
ลอง»
ผลหีบเพลง
ผลหีบเพลงสำหรับการขยายและการตั้งค่าเนื้อหาพับ
ผลหีบเพลงโดยใช้เสียงข้างมากของจุดยึดที่แตกต่างกันและบัตรประจำตัวที่จะสร้างการเชื่อมโยง:
ตัวอย่าง
<ul class = "หีบเพลง" ข้อมูล -accordion>
<ระดับ Li = "หีบเพลงนำทาง ">
<A href = "#demo"> หีบเพลงเช่น 1 </ a>
<div id = "สาธิต" ชั้น = "เนื้อหาที่ใช้งาน">
สาธิต 1 - กวดวิชา - วิทยาศาสตร์ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน! ! !
</ div>
</ li>
<ระดับ Li = "หีบเพลงนำทาง ">
<A href = "# demo2"> เช่นหีบเพลง 2 </ a>
<div id = "Demo2" ชั้น = "เนื้อหา">
สาธิต 2 - Lorem Ipsum บังคับ Amet นั่ง thth
</ div>
</ li>
<ระดับ Li = "หีบเพลงนำทาง ">
<A href = "# demo3"> หีบเพลงเช่น 3 </ a>
<div id = "demo3" ชั้น = "เนื้อหา">
สาธิต 3 - กวดวิชา - วิทยาศาสตร์ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน! ! !
</ div>
</ li>
</ ul>
ลอง» โดยค่าเริ่มต้นหีบเพลงมีตัวเลือกรายการเปิด หากคุณต้องการที่จะปิดทั้งหมดสามารถใช้ data-options="multi_expand:true;" ;" คุณสมบัติ:
ตัวอย่าง
<ul class = "หีบเพลง" ข้อมูล -accordion ข้อมูลตัวเลือก = "multi_expand: จริง;">
th
</ ul>
ลอง»