Bootstrap JS Açılır Menüsü
JS Açılır Listesi (dropdown.js)
Açılır menü, kullanıcının önceden tanımlanmış bir listeden bir değer seçmesine izin veren, değiştirilebilir bir menüdür.
Açılır İndirmeler hakkında bir eğitim için Bootstrap Açılır İndirmeler Eğitimimizi okuyun .
Açılır Eklenti Sınıfları
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | |
| .dropdown-menu | Builds the dropdown menu | |
| .dropdown-menu-right | Right-aligns a dropdown menu | |
| .dropdown-header | Adds a header inside the dropdown menu | |
| .dropup | Indicates a dropup menu | |
| .disabled | Disables an item in the dropdown menu | |
| .divider | Separates items inside the dropdown menu with a horizontal line |
Veri-* Öznitelikler aracılığıyla
data-toggle="dropdown"Bir açılır menüyü değiştirmek için bir bağlantıya veya bir düğmeye ekleyin .
Örnek
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
Örnek
$('.dropdown-toggle').dropdown();
Not: data-toggle="dropdown" niteliği, dropdown() yöntemini çağırsanız da çağırmasanız da gereklidir.
Açılır Seçenekler
| None |
Açılır Yöntemler
Aşağıdaki tablo, mevcut tüm açılır yöntemleri listeler.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown |
Açılır Olaylar
Aşağıdaki tablo, mevcut tüm açılır liste olaylarını listeler.
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) |
İpucu: Açılır menüyü tetikleyen öğeyi almak için jQuery'nin event . RelationsTarget öğesini kullanın :
Örnek
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Daha fazla örnek
İmleç simgesini baş aşağı olarak değiştirin
Aşağıdaki örnek, açılır menü tıklandığında şapka simgesinin aşağıyı göstermesini yukarıya doğru çevirmesi:
Örnek
/* 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>
Açılan Gezinme Çubuğu
Aşağıdaki örnek, gezinme çubuğundaki bir düğme için bir açılır menü ekler:
Örnek
<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>
Aşağıdaki örnek, gezinme çubuğuna bir oturum açma formu içeren bir açılır menü ekler:
Örnek
<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>
Çok Seviyeli Açılır Menüler
Bu örnekte, tıklandığında çok seviyeli açılır menüleri açmak için jQuery kullanıyoruz:
Örnek
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
.dropdown-submenuBu örnekte, çok seviyeli açılır menüler için özel bir sınıf oluşturduk :
Örnek
/* 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>