หีบเพลง
หีบเพลงจะใช้ในการแสดง (และซ่อน) เนื้อหาที่ถูกแบ่งออกเป็นส่วน
คลิกที่ปุ่ม "เปิดส่วน" ด้านล่างเพื่อดูวิธีการทำงาน:
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
หีบเพลงกับภาพ:
Trolltunga, นอร์เวย์
ชั้น W3-หีบเพลงกำหนดหีบเพลงและชั้น W3-หีบเพลงเนื้อหากำหนดส่วนหนึ่งที่จะแสดง:
ตัวอย่าง
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>ทั้งสององค์ประกอบที่จะใช้ในการเปิดหีบเพลงหีบเพลงและเนื้อหาของอาจมีองค์ประกอบ HTML ใด ๆ
หีบเพลงเทียบกับแบบเลื่อนลง
รายการด้านล่างนี้แสดงให้เห็นถึงความแตกต่างระหว่างหีบเพลงและเลื่อนลงไปนี้:
accordions
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
- เนื้อหากว้าง 100% (ช่วงที่กว้างทั้งหมดขององค์ประกอบหลัก)
- เมื่อเปิดมันดันเนื้อหาของหน้าลงถ้ามี (ตำแหน่ง: ญาติ)
- มักจะใช้เพื่อ "เปิด" หลายส่วน
เมนูแบบเลื่อนลง
- เนื้อหาเป็นขั้นต่ำ 160px กว้างและอื่น ๆ หากมีความจำเป็น
- เมื่อเปิดมันวางเนื้อหาหน้าเว็บ (position: absolute)
- มักจะใช้เพื่อ "เปิด" ส่วนหนึ่ง
ปุ่มหีบเพลง
คุณสามารถใช้องค์ประกอบ HTML ใด ๆ เพื่อเปิดเนื้อหาหีบเพลง เราต้องการที่ปุ่มที่มีชั้น W3-btn บล็อกเพราะมันมีช่วงที่กว้างทั้งหมดขององค์ประกอบหลักของมันเช่นเดียวกับเนื้อหาหีบเพลง (กว้าง 100%) โปรดจำไว้ว่าปุ่ม W3.CSS เป็นศูนย์กลางโดยค่าเริ่มต้น ใช้คลาส W3 ซ้าย-align ถ้าคุณต้องการให้พวกเขาจัดชิดซ้ายแทน แต่คุณไม่จำเป็นต้องทำตามวิธีการของเรา - หีบเพลงจะดูดีทั้งทาง:
Lorem Ipsum ...
Lorem Ipsum ...
ศูนย์กลางเนื้อหาเช่นกัน!
ตัวอย่าง
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>ปุ่มหีบเพลงที่ใช้งานอยู่
ใช้งาน JavaScript เพื่อเน้น accordions ที่มีการเปิด (คลิก):
ข้อความบางส่วน ..
บางข้อความอื่น ๆ ..
ตัวอย่าง
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}หีบเพลงกว้าง
โดยค่าเริ่มต้นความกว้างของหีบเพลงเป็น 100% เพื่อแทนที่นี้เปลี่ยนความกว้าง CSS คุณสมบัติของภาชนะ W3-หีบเพลง:
ข้อความบางส่วน ..
ข้อความบางส่วน ..
ข้อความบางส่วน ..
ข้อความบางส่วน ..
ตัวอย่าง
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>เนื้อหาหีบเพลง
หีบเพลงกับการเชื่อมโยง:
ตัวอย่าง
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>หีบเพลงเป็นบัตรที่มีรายการ A:
- จิลล์
- วันก่อนวันหยุด
- อาดัม
ตัวอย่าง
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>หีบเพลงภายใน Sidenav(หมายเหตุ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการนำทางด้านในภายหลัง):
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>accordions เคลื่อนไหว
ใช้ใด ๆ ของชั้นเรียน W3-animate- จะจางหายไป, ซูมหรือภาพนิ่งในเนื้อหาหีบเพลง: