JS Dropdown (dropdown.js)
มีเมนูแบบเลื่อนลงเป็นเมนู toggleable ที่ช่วยให้ผู้ใช้สามารถเลือกหนึ่งค่าจากรายการที่กำหนดไว้ล่วงหน้า
สำหรับการสอนเกี่ยวกับเมนูแบบเลื่อนลงอ่านของเรา Bootstrap dropdowns กวดวิชา
เรียนแบบเลื่อนลงปลั๊กอิน
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .dropdown | บ่งบอกถึงเมนูแบบเลื่อนลง | ลองมัน |
| .dropdown-menu | สร้างเมนูแบบเลื่อนลง | ลองมัน |
| .dropdown-menu-right | ขวาสอดคล้องเมนูแบบเลื่อนลง | ลองมัน |
| .dropdown-header | เพิ่มส่วนหัวภายในเมนูแบบเลื่อนลง | ลองมัน |
| .dropup | แสดงให้เห็นเมนู dropup | ลองมัน |
| .disabled | ปิดการใช้งานรายการในเมนูแบบเลื่อนลง | ลองมัน |
| .divider | แยกรายการภายในเมนูแบบเลื่อนลงกับเส้นแนวนอน | ลองมัน |
ผ่าน data-* แอตทริบิวต์
เพิ่ม data-toggle="dropdown" เพื่อการเชื่อมโยงหรือปุ่มเพื่อสลับเมนูแบบเลื่อนลง
ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
หมายเหตุ: data-toggle="dropdown" แอตทริบิวต์จะต้องคำนึงถึงว่าคุณเรียก dropdown() วิธีการ
ตัวเลือกแบบเลื่อนลง
| None |
วิธีการแบบเลื่อนลง
ตารางต่อไปนี้แสดงวิธีการแบบเลื่อนที่มีอยู่ทั้งหมด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .dropdown("toggle") | สลับแบบเลื่อนลง | ลองมัน |
เหตุการณ์แบบเลื่อนลง
ตารางต่อไปนี้แสดงเหตุการณ์แบบเลื่อนที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| show.bs.dropdown | เกิดขึ้นเมื่อเลื่อนลงเป็นเรื่องเกี่ยวกับที่จะแสดง | ลองมัน |
| shown.bs.dropdown | เกิดขึ้นเมื่อเลื่อนลงก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
| hide.bs.dropdown | เกิดขึ้นเมื่อเลื่อนลงเป็นเรื่องที่จะซ่อน | ลองมัน |
| hidden.bs.dropdown | เกิดขึ้นเมื่อเลื่อนลงจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
เคล็ดลับ: ใช้ของ jQuery event.relatedTarget ที่จะได้รับองค์ประกอบที่เรียกแบบเลื่อนลง:
ตัวอย่าง
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); ลองตัวเอง» 
ตัวอย่าง
เปลี่ยนไอคอนลูกศรเพื่อคว่ำ
ตัวอย่างต่อไปนี้การเปลี่ยนแปลงไอคอนรูปหมวกจากชี้ลงเพื่อขึ้นเมื่อคลิกที่เลื่อนลง:
ตัวอย่าง
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <span
class="caret caret-up"></span>');
});
});
</script> ลองตัวเอง» Navbar ด้วยแบบเลื่อนลง
ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงปุ่มในแถบนำทาง A:
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav> ลองตัวเอง» ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงด้วยรูปแบบการเข้าสู่ระบบในแถบนำทางไปนี้:
ตัวอย่าง
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span
class="glyphicon glyphicon-log-in"></span></a>
<div
class="dropdown-menu">
<form
id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul> ลองตัวเอง» dropdowns หลายระดับ
ในตัวอย่างนี้เราจะใช้ jQuery เพื่อเปิดเมนูแบบเลื่อนลงหลายระดับเมื่อคลิก:
ตัวอย่าง
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> ลองตัวเอง» ในตัวอย่างนี้เราได้สร้างที่กำหนดเอง .dropdown-submenu ชั้นเรียนสำหรับเมนูแบบเลื่อนลงหลายระดับ:
ตัวอย่าง
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top:
-1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> ลองตัวเอง»