JS Dropdown

Dropdown CSS klasslari

Ochiluvchi menyular haqidagi darslik uchun Bootstrap ochiluvchi menyular darsligimizni o‘qing.

Klass	Tavsif	Misol
`.dropdown`	Ochiluvchi menyuni bildiradi	Sinab ko‘ring
`.dropdown-item`	Ochiluvchi menyu ichidagi havolalarni to‘g‘ri ichki chekinish va h.k. bilan bezaydi	Sinab ko‘ring
`.dropdown-item-text`	Ochiluvchi menyu ichidagi matn yoki matnli havolalarni to‘g‘ri ichki chekinish va h.k. bilan bezaydi	Sinab ko‘ring
`.dropdown-menu`	Ochiluvchi menyuni hosil qiladi	Sinab ko‘ring
`.dropdown-menu-right`	Ochiluvchi menyuni o‘ngga tekislaydi	Sinab ko‘ring
`.dropdown-header`	Ochiluvchi menyu ichiga sarlavha qo‘shadi	Sinab ko‘ring
`.dropup`	Yuqoriga ochiladigan menyuni (dropup) bildiradi	Sinab ko‘ring
`.disabled`	Ochiluvchi menyudagi elementni nofaol qiladi	Sinab ko‘ring
`.active`	Ochiluvchi menyudagi faol elementni bezaydi	Sinab ko‘ring
`.divider`	Ochiluvchi menyu ichidagi elementlarni gorizontal chiziq bilan ajratadi	Sinab ko‘ring

Ochiluvchi menyuni ochib-yopish uchun havola yoki tugmaga data-toggle="dropdown" ni qo‘shing.

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

Qo‘lda faollashtirish uchun:

$('.dropdown-toggle').dropdown();

Eslatma: dropdown() metodini chaqirasizmi yoki yo‘qmi, bundan qat’i nazar data-toggle="dropdown" atributi talab qilinadi.

Yo‘q

Quyidagi jadvalda barcha mavjud dropdown metodlari keltirilgan.

Metod	Tavsif	Sinab ko‘ring
.dropdown("toggle")	Ochiluvchi menyuni ochadi/yopadi (toggle). Agar o‘rnatilgan bo‘lsa, ochiluvchi menyuni standart holatda ochadi	Sinab ko‘ring
.dropdown("update")	Elementning ochiluvchi menyusi joylashuvini yangilaydi
.dropdown("dispose")	Elementning ochiluvchi menyusini yo‘q qiladi

Quyidagi jadvalda barcha mavjud dropdown hodisalari keltirilgan.

Hodisa	Tavsif	Sinab ko‘ring
show.bs.dropdown	Ochiluvchi menyu ko‘rsatilish arafasida yuz beradi.	Sinab ko‘ring
shown.bs.dropdown	Ochiluvchi menyu to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring
hide.bs.dropdown	Ochiluvchi menyu yashirilish arafasida yuz beradi	Sinab ko‘ring
hidden.bs.dropdown	Ochiluvchi menyu to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring

Maslahat: Ochiluvchi menyuni ishga tushirgan elementni olish uchun jQuery’ning event.relatedTarget xususiyatidan foydalaning:

$(".dropdown").on("show.bs.dropdown", function(event){ var x = $(event.relatedTarget).text(); // Get the text of the element alert(x); });

Yutuqlaringizni kuzating – bu bepul!