Bagaimana untuk Menghalang Bootstrap Dropdown daripada Ditutup Apabila Mengklik Di Dalam?

Halang penutupan pada klik dalam menu lungsur turun

Dalam Twitter Bootstrap, menu lungsur akan ditutup pada klik (malah klik dalam menu) . Untuk mengelakkan ini, anda boleh melampirkan pengendali acara klik pada menu lungsur dan menambah acara terkenal.stopPropagation().

<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">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul></code>

Kaedah ini kelihatan mudah dan sangat biasa, tetapi kerana pengendali acara kawalan karusel (dan penunjuk karusel) diwakilkan kepada objek dokumen, ia tidak sesuai untuk elemen ini (kawalan sebelumnya/seterusnya , dsb. ) akan "diabaikan".

<code class="js">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // 不会向document 节点传播事件
    // 所以委托的事件不会被触发
    event.stopPropagation();
});</code>

Bergantung pada acara sembunyi/tersembunyi lungsur Twitter Bootstrap bukanlah penyelesaian atas sebab berikut:

• Objek acara yang disediakan oleh kedua-dua pengendali acara ini tidak merujuk kepada yang diklik unsur .
• Tiada kawalan ke atas kandungan menu lungsur turun, jadi kelas bendera atau atribut tidak boleh ditambah.

Berikut ialah demo biola tingkah laku biasa dan demo biola dengan acara.stopPropagation() ditambah.

Kemas kini

Terima kasih Roman atas jawapannya. Saya juga menemui jawapan lain, seperti berikut:

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

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Bootstrap Dropdown daripada Ditutup Apabila Mengklik Di Dalam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!