Komponen lungsur Bootstrap komponen JS memanjangkan kemahiran hover event

Komponen lungsur Bootstrap komponen JS memanjangkan kemahiran hover event_javascript

WBOY

Lepaskan： 2016-05-16 15:05:02

asal

1538 orang telah melayarinya

Komponen lungsur turun dalam bar navigasi bootstrap digunakan dengan sangat kerap

Bagaimana untuk melaksanakan acara tuding ini sebenarnya, ia boleh dicapai dengan mudah berdasarkan acara klik komponen lungsur turun. Mereka yang berhati-hati boleh mendapati bahawa apabila kotak drop-down muncul, induknya akan mempunyai atribut kelas terbuka. Kami hanya perlu menambah atau memadam kelas terbuka kepada induk apabila mendengar acara tuding.

pemalam boostrap-hover-dropdown.js, URL kod dihoskan pada github:

Lihat

Berikut ialah kod pemalam js yang lengkap:

// bootstrap响应式导航条<br>;(function($, window, undefined) {
  // outside the scope of the jQuery plugin to
  // keep track of all dropdowns
  var $allDropdowns = $();
 
  // if instantlyCloseOthers is true, then it will instantly
  // shut other nav items when a new one is hovered over
  $.fn.dropdownHover = function(options) {
 
    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());
 
    return this.each(function() {
      var $this = $(this).parent(),
        defaults = {
          delay: 500,
          instantlyCloseOthers: true
        },
        data = {
          delay: $(this).data('delay'),
          instantlyCloseOthers: $(this).data('close-others')
        },
        options = $.extend(true, {}, defaults, options, data),
        timeout;
 
      $this.hover(function() {
        if(options.instantlyCloseOthers === true)
          $allDropdowns.removeClass('open');
 
        window.clearTimeout(timeout);
        $(this).addClass('open');
      }, function() {
        timeout = window.setTimeout(function() {
          $this.removeClass('open');
        }, options.delay);
      });
    });
  };
 
  $('[data-hover="dropdown"]').dropdownHover();
})(jQuery, this);

Salin selepas log masuk

Anda boleh melihat bahawa pengarang menambahkan koma bertitik; di hadapan pemalam untuk meningkatkan keserasian pemalam, kerana kod js sebelumnya mungkin tidak ditulis; jika anda tidak menambah koma bertitik di sini , ia mungkin menyebabkan ralat js kerana tiada pemisah baris.

Parameter pilihan

kelewatan: (pilihan) Kelewatan dalam milisaat. Inilah masanya untuk menunggu sebelum menutup menu lungsur apabila tetikus tidak lagi berada di atas menu lungsur turun atau butang/item navigasi, mengaktifkannya. Nilai lalai ialah 500.
serta-mertaCloseOthers: (pilihan) Nilai Boolean yang, jika benar, akan segera menutup semua menu lungsur turun lain yang digunakan apabila anda melancarkan navigasi padanan pemilih baharu. Nilai lalai adalah benar.

Selepas menambah kod js di atas, kesannya tidak dapat dicapai pada masa ini, kerana kita perlu melakukan satu langkah lagi, iaitu menambah atribut data-* pada elemen:

data-hover="dropdown"

Kod elemen HTML lengkap:

Salin kod Kod adalah seperti berikut:

Pilihan boleh ditetapkan melalui atribut data, atau melalui kelewatan data dan data-tutup-lain

Salin kod Kod adalah seperti berikut:

Sudah tentu, terdapat cara yang paling mudah, iaitu menggunakan kawalan hover CSS
[/code].nav> li:hover .dropdown-menu {paparan: blok;}[/kod]

Barisan kod sedemikian juga boleh mencapai kesan tuding yang diingini, tetapi jika anda mengklik pada komponen semasa melayang, dan kemudian tuding komponen lain, kesan berikut akan muncul:

Di atas ialah cara menggunakan komponen lungsur turun Bootstrap untuk memanjangkan acara tuding.