เมนูแบบเลื่อนลงบูต (เลื่อนลง) วิดเจ็ต
บูตเมนูแบบเลื่อนลง บทนี้จะอธิบายเมนูแบบเลื่อนลง แต่ไม่ได้เกี่ยวข้องกับการมีส่วนร่วมปฏิสัมพันธ์บทนี้จะอธิบายในรายละเอียดปฏิสัมพันธ์ของเมนูแบบเลื่อนลง ใช้เมนูแบบเลื่อนลง (เลื่อนลง) plug-in ที่คุณสามารถเพิ่มเมนูแบบเลื่อนลงไปที่ใด ๆ ของส่วนประกอบ (เช่นแถบนำทางแท็บแคปซูลเมนูนำทาง, ปุ่ม, ฯลฯ )
หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงdropdown.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
การใช้
คุณสามารถสลับเมนูแบบเลื่อนลงซ่อน (เลื่อนลง) plug-in:
- ผ่านคุณลักษณะข้อมูล: การเชื่อมโยงหรือเพื่อเพิ่มข้อมูลสลับ = "เลื่อนลง"เมนูแบบเลื่อนลงเพื่อสลับดังนี้
<ระดับ Div = "เลื่อนลง">
<a data-toggle="dropdown" เมนูแบบเลื่อนลง href="#"> (เลื่อนลง) ทริกเกอร์ </a>
<ระดับ Ul = "แบบเลื่อนลงเมนูบทบาท" = "เมนู" Aria-labelledby = "dLabel">
...
</ ul>
</ div>
หากคุณต้องการที่จะทำให้การเชื่อมโยงเหมือนเดิม (มีประโยชน์เมื่อเบราว์เซอร์ที่ไม่ได้เปิดการใช้งานจาวาสคริปต์)โปรดใช้แอตทริบิวต์ข้อมูลเป้าหมายแทน href = "#":
<ระดับ Div = "เลื่อนลง">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
เมนู (เลื่อนลง) เลื่อนลง <span class = "ลูกศร"> </ span>
</a>
<ระดับ Ul = "แบบเลื่อนลงเมนูบทบาท" = "เมนู" Aria-labelledby = "dLabel">
...
</ ul>
</ div>
- โดย javascript: JavaScript โดยการเรียกเมนูแบบเลื่อนลงเพื่อสลับโปรดใช้วิธีการต่อไปนี้:
$ ( '. เลื่อนลง-สลับ'). เลื่อนลง ()
ตัวอย่าง
ในแถบนำทาง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของแถบเมนูแบบเลื่อนลงไปนี้:
ตัวอย่าง
<Nav class = "Navbar Navbar เริ่มต้น" บทบาท = "นำทาง">
<div class = "ภาชนะบรรจุของเหลว">
<div class = "Navbar หัว">
<a class = "Navbar แบรนด์" href = "#"> กวดวิชา </ a>
</ div>
<div>
<ul class = "NAV Navbar-NAV" >
<li class = "ใช้งาน"> <a href = "#"> iOS < / a> </ li>
<li> <a href = "#"> SVN < / a> </ li>
<li class = "เลื่อนลง">
<a href = "#" class = "แบบเลื่อนลง-สลับ" ข้อมูลสลับ = "เลื่อนลง"> Java <b class = "ลูกศร"> </ b>
</ A>
<ul class = "แบบเลื่อนลงเมนู">
<li> <a href = "#"> JMeter < / a> </ li>
<li> <a href = "#"> EJB < / a> </ li>
<li> <a href = "#"> รายงานแจสเปอร์ </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> การเชื่อมโยงแยก </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> อีกลิงค์ที่แยก </ a> </ li>
</ ul>
</ li>
</ ul>
</ div>
</ div>
</ Nav>
ผลมีดังนี้
ในแท็บภายใน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้แท็บในเมนูแบบเลื่อนลงไปนี้:
ตัวอย่าง
<p> แท็กด้วยเมนูแบบเลื่อนลงหน้า </ p>
<ul class = "NAV NAV-แท็บ" >
<li class = "ใช้งาน">
<a href = "#"> หน้าแรก < / a> </ li>
<li>
<a href = "#"> SVN < / a> </ li>
<li>
<a href = "#"> iOS < / a> </ li>
<li>
<a href = "#"> VB.Net < / a> </ li>
<li class = "เลื่อนลง">
<a class = "แบบเลื่อนลง-สลับ" ข้อมูลสลับ = "เลื่อนลง" href = "#"> Java < ช่วง class = "ลูกศร"> </ span> </ A>
<ul class = "แบบเลื่อนลงเมนู">
<li>
<a href = "#"> สวิง < / a> </ li>
<li>
<a href = "#"> JMeter < / a> </ li>
<li>
<a href = "#"> EJB < / a> </ li>
<li class = "แบ่ง"> </ li>
<li>
<a href = "#"> การเชื่อมโยงแยก </ a> </ li>
</ ul>
</ li>
<li>
<a href = "#"> PHP < / a> </ li>
</ ul>
ผลมีดังนี้
ตัวเลือก
มีตัวเลือกไม่มี
ทาง
เมนูแบบเลื่อนลงเพื่อสลับมีวิธีง่ายๆในการแสดงหรือซ่อนเมนูแบบเลื่อนลง
$ (). เลื่อนลง ( 'สลับ')
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเมนูแบบเลื่อนลง (เลื่อนลง) วิธี plug-in:
ตัวอย่าง
<Nav class = "Navbar Navbar เริ่มต้น" บทบาท = "นำทาง">
<div class = "ภาชนะบรรจุของเหลว">
<div class = "Navbar หัว">
<a class = "Navbar แบรนด์" href = "#"> W3Cschool < / a>
</ div>
<div id = "MyExample">
<ul class = "NAV Navbar-NAV" >
<li class = "ใช้งาน">
<a href = "#"> iOS < / a>
</ li>
<li>
<a href = "#"> SVN < / a>
</ li>
<li class = "เลื่อนลง">
<a href = "#" class = "แบบเลื่อนลง-สลับ" ข้อมูลสลับ = "เลื่อนลง"> Java <b class = "ลูกศร"> </ b>
</ A>
<ul class = "แบบเลื่อนลงเมนู">
<li>
<a id = "การกระทำ-1" href = "#"> JMeter < / a>
</ li>
<li>
<a href = "#"> EJB < / a>
</ li>
<li>
<a href = "#"> รายงานแจสเปอร์ </ a>
</ li>
<li class = "แบ่ง"> </ li>
<li>
<a href = "#"> การเชื่อมโยงแยก </ a>
</ li>
<li class = "แบ่ง"> </ li>
<li>
<a href = "#"> อีกลิงค์ที่แยก </ a>
</ li>
</ ul>
</ li>
</ ul>
</ div>
</ div>
</ Nav>
</ div>
<script> $ (ฟังก์ชั่น () {$ ( "แบบเลื่อนลง-สลับ.") เลื่อนลง ( 'สลับ') ;. }); </ script>
ผลมีดังนี้
