Bagaimana untuk Menghalang Bootstrap Dropdown daripada Menutup Klik Dalaman Semasa Mengekalkan Fungsi Pengendali Acara yang Diwakilkan?

Mengurus Dropdown: Mencegah Penutupan Menu pada Klik Dalaman

Cabaran dengan dropdown Twitter Bootstrap ialah kecenderungan mereka untuk menutup sebarang klik, termasuk yang dibuat dalam menu itu sendiri. Untuk mengatasi pengehadan ini, adalah perkara biasa untuk melampirkan pengendali acara pada menu lungsur turun dengan acara mudah.stopPropagation().

Walau bagaimanapun, penyelesaian ini mempunyai kelemahan: pengendali acara yang diwakilkan untuk elemen seperti kawalan karusel menjadi tidak berkesan. Untuk memahami perkara ini, pertimbangkan kod berikut:

<code class="html"><ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel content -->
        </div>
      </li>
    </ul>
  </li>
</ul></code>

<code class="javascript">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});</code>

Dengan melampirkan pengendali acara pada ul.dropdown-menu.mega-dropdown-menu, kami berhasrat untuk menghalang menu daripada ditutup pada sebarang klik di dalamnya. Walau bagaimanapun, pengendali acara yang diwakilkan yang didaftarkan pada objek dokumen untuk elemen seperti kawalan karusel menjadi tidak berkesan, mengakibatkan kegagalan mereka untuk mencetuskan acara.

Penyelesaian:

Untuk menyelesaikan masalah ini. isu, anda boleh menggunakan kod berikut:

<code class="javascript">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

Dengan menggunakan $(document).on('click', ...), anda memastikan bahawa pengendali acara dilampirkan pada keseluruhan objek dokumen. Ini membolehkannya memintas klik dalam menu lungsur sambil masih membenarkan pengendali acara yang diwakilkan berfungsi dengan betul.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Bootstrap Dropdown daripada Menutup Klik Dalaman Semasa Mengekalkan Fungsi Pengendali Acara yang Diwakilkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!