Hindari menu dropdown tutup klik di dalam

Saya memiliki menu tarik-turun Bootstrap Twitter. Seperti yang diketahui semua pengguna Twitter Bootstrap, menu dropdown ditutup saat klik (bahkan mengklik di dalamnya).

Untuk menghindari ini, saya dapat dengan mudah melampirkan pengendali event klik pada menu dropdown dan cukup menambahkan yang terkenal event.stopPropagation().

<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>

Ini terlihat mudah dan merupakan perilaku yang sangat umum, dan karena carousel-controls(dan juga carousel indicators) penangan event didelegasikan ke documentobjek, clickperistiwa pada elemen-elemen ini ( kontrol selanjutnya , ...) akan "diabaikan".

$('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();
});

Mengandalkan dropdown hide/ hiddenacara Bootstrap Twitter bukanlah solusi karena alasan berikut:

• Objek acara yang disediakan untuk kedua penangan acara tidak memberikan referensi ke elemen yang diklik
• Saya tidak memiliki kontrol atas konten menu dropdown sehingga menambahkan flagkelas atau atribut tidak mungkin

Biola ini adalah perilaku normal dan biola ini event.stopPropagation()ditambahkan.

Memperbarui

Terima kasih kepada Roman atas jawabannya . Saya juga menemukan jawaban yang dapat Anda temukan di bawah .

Menghapus atribut data data-toggle="dropdown"dan menerapkan buka / tutup dropdown dapat menjadi solusi.

Pertama dengan menangani klik pada tautan untuk membuka / menutup dropdown seperti ini:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

dan kemudian mendengarkan klik di luar dropdown untuk menutupnya seperti ini:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

Ini adalah demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

Ini akan membantu juga

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

Bootstrap menyediakan fungsi berikut:

                 | Acara ini dipecat segera ketika metode contoh menyembunyikan
hide.bs.dropdown | sudah dipanggil. Elemen jangkar toggling tersedia sebagai
                 | properti terkait Target dari acara tersebut.

Oleh karena itu, menerapkan fungsi ini harus dapat menonaktifkan dropdown dari penutupan.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});

Jawaban terbaik mutlak adalah menempatkan tag formulir setelah menu dropdown kelas

jadi kodemu

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

Saya juga menemukan solusinya.

Dengan asumsi bahwa Twitter Bootstrap Componentspenangan peristiwa terkait didelegasikan ke documentobjek, saya melingkar penangan terlampir dan memeriksa apakah elemen yang diklik saat ini (atau salah satu dari orang tuanya) prihatin dengan peristiwa yang didelegasikan.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});

Semoga ini membantu siapa pun yang mencari solusi serupa.

Terima kasih atas bantuannya.

Ini mungkin membantu:

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

Ini dapat bekerja untuk kondisi apa pun.

jQuery:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>

HTML:

<div class="dropdown keep-inside-clicks-open">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
     Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Demo :

Umum: https://jsfiddle.net/kerryjohnson/omefq68b/1/

Demo Anda dengan solusi ini: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

Saya mencoba hal sederhana ini dan berhasil seperti pesona.

Saya mengubah elemen menu dropdown dari <div>ke <form>dan itu bekerja dengan baik.

<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
     </li>
     <li class="list-group-item"   >
     </li>
  </ul>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
      List Item 1
     </li>
     <li class="list-group-item"   >
         LI 2<input class="form-control" />
     </li>
     <li class="list-group-item"   >
        List Item 3
     </li>
  </ul>
</form>

Aku punya masalah yang sama baru-baru ini dan mencoba berbagai cara untuk mengatasinya dengan menghapus data atribut data-toggle="dropdown"dan mendengarkan clickdenganevent.stopPropagation() menelepon.

Cara kedua terlihat lebih disukai. Pengembang Bootstrap juga menggunakan cara ini. Di file sumber saya menemukan inisialisasi elemen dropdown:

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

Jadi, baris ini:

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

menyarankan Anda dapat meletakkan formelemen di dalam wadah dengan kelas .dropdownuntuk menghindari penutupan menu dropdown.

Bootstrap telah memecahkan masalah ini sendiri dengan dukungan mereka untuk <form>tag dalam dropdown. Solusi mereka cukup dapat dipahami dan Anda dapat membacanya di sini: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

Itu bermuara untuk mencegah propagasi pada elemen dokumen dan melakukannya hanya untuk acara bertipe 'click.bs.dropdown.data-api'yang cocok dengan pemilih'.dropdown .your-custom-class-for-keep-open-on-click-elements' .

Atau dalam kode

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});

Saya memodifikasi jawaban @ Vartan agar berfungsi dengan Bootstrap 4.3. Solusinya tidak berfungsi lagi dengan versi terbaru karena targetproperti selalu mengembalikan root dropdowndiv mana pun klik ditempatkan.

Ini kodenya:

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked. 
    // What we usually want to happen in such situations is to hide the dropdown so we let it hide. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});

<div class="dropdown dropdown-keep-open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

• demo: http://jsfiddle.net/4y8tLgcp/

$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
    var $a  = $(e.target), is_a = $a.is('.is_a');
    if($a.hasClass('dropdown-toggle')){   
        $('ul.dropdown-menu', this).toggle(!is_a);
        $a.toggleClass('is_a', !is_a);
    }
}).on('mouseleave', function(){
    $('ul.dropdown-menu',this).hide();
    $('.is_a', this).removeClass('is_a');
});

Saya telah memperbaruinya sekali lagi untuk menjadi yang paling cerdas dan fungsional mungkin. sekarang tutup ketika Anda membawa di luar nav, tetap terbuka saat Anda berada di dalamnya. sempurna.

Seperti misalnya Bootstrap 4 Alpha memiliki Peristiwa Menu ini. Kenapa tidak digunakan?

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});

Anda dapat menghentikan klik pada dropdown dari menyebarkan dan kemudian secara manual menerapkan kembali kontrol carousel menggunakan metode javascript carousel .

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

Ini jsfiddle .

Dengan Angular2 Bootstrap, Anda dapat menggunakan nonInput untuk sebagian besar skenario:

<div dropdown autoClose="nonInput">

nonInput - (default) secara otomatis menutup dropdown ketika salah satu elemennya diklik - selama elemen yang diklik bukanlah input atau textarea.

https://valor-software.com/ng2-bootstrap/#/dropdowns

Saya tahu pertanyaan ini khusus untuk jQuery, tetapi bagi siapa pun yang menggunakan AngularJS yang memiliki masalah ini, Anda dapat membuat arahan yang menangani ini:

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
          });
        }
    };
});

Kemudian tambahkan saja atribut dropdown-prevent-closeke elemen Anda yang memicu menu untuk menutup, dan itu harus mencegahnya. Bagi saya, itu adalah selectelemen yang secara otomatis menutup menu:

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>

[Bootstrap 4 Alpha 6] [Rails] Untuk rel pengembang, e.stopPropagation()akan menyebabkan perilaku yang tidak diinginkan untuk link_todengan data-methodtidak sama untuk getkarena akan dengan kembali default semua permintaan Anda sebagai get.

Untuk mengatasi masalah ini, saya sarankan solusi ini, yang bersifat universal

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<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>

Alih-alih menulis beberapa kode javascript atau jquery (menciptakan kembali roda). Skenario di atas dapat dikelola dengan opsi tutup otomatis bootstrap. Anda dapat memberikan salah satu nilai untuk ditutup secara otomatis :

1. always - (Default) secara otomatis menutup dropdown ketika salah satu elemennya diklik.

2. outsideClick - menutup dropdown secara otomatis hanya ketika pengguna mengklik elemen apa pun di luar dropdown.

3. dinonaktifkan - menonaktifkan penutupan otomatis

Lihatlah plunkr berikut:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

Set

uib-dropdown auto-close="disabled" 

Semoga ini membantu :)

Saya tahu sudah ada jawaban sebelumnya yang menyarankan untuk menggunakan formulir tetapi markup yang diberikan tidak benar / ideal. Inilah solusi termudah, tidak perlu javascript sama sekali dan tidak merusak dropdown Anda. Bekerja dengan Bootstrap 4.

<form class="dropdown-item"> <!-- Your elements go here --> </form>

Ini membantu saya,

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

Elemen menu tarik turun Anda harus seperti ini, (catat kelas dropdown-menudan keepopen.

<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">

Kode di atas mencegah pengunduhan pada keseluruhan <body>, sebagai gantinya ke elemen specfic dengan kelas dropdown-menu.

Semoga ini bisa membantu seseorang.

Terima kasih.

Solusi kerja paling sederhana bagi saya adalah:

• menambahkan keep-open kelas ke elemen yang seharusnya tidak menyebabkan penutupan dropdown
• dan bagian kode ini melakukan sisanya:

$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});

Saya tidak menemukan satu pun solusi yang berfungsi karena saya ingin menggunakan nav bootstrap default. Ini solusi saya untuk masalah ini:

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });

Dalam .dropdownkonten, letakkan .keep-openkelas pada label seperti ini:

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

Kasus-kasus sebelumnya menghindari peristiwa yang berkaitan dengan objek kontainer, sekarang wadah mewarisi kelas tetap terbuka dan periksa sebelum ditutup.

Saya melakukannya dengan ini:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});

$(function() {
    $('.mega-dropdown').on('hide.bs.dropdown', function(e) {
        var $target = $(e.target);
        return !($target.hasClass("keep-open") || $target.parents(".keep-open").size() > 0);
    });

    $('.mega-dropdown > ul.dropdown-menu').on('mouseenter', function() {
        $(this).parent('li').addClass('keep-open')
    }).on('mouseleave', function() {
        $(this).parent('li').removeClass('keep-open')
    });
});

Untuk menutup dropdown hanya jika acara klik dipicu di luar dropdown bootstrap, inilah yang bekerja untuk saya:

File JS:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

File HTML:

<!-- button: -->
<div class="createNewElement">
                <div class="btn-group tags-btn-group keep-open-dropdown">

                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">OPEN DROPDOWN</div>

                    <ul class="dropdown-menu">
                        WHAT EVER YOU WANT HERE...
                    </ul>

                </div>
</div>

Anda mungkin memiliki beberapa masalah jika Anda menggunakan metode return false atau stopPropagation () karena acara Anda akan terputus. Coba kode ini, ini berfungsi dengan baik:

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

Dalam HTML:

<div class="dropdown keep-open" id="search-menu" >
    <button  class="btn dropdown-toggle btn  btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-filter fa-fw"></i> 
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" id="opt1" type="button">Option 1</button>
        <button class="dropdown-item" id="opt2" type="button">Option 2</button>
        <button type="button" class="btn btn-primary closeDropdown">Close</button>
    </div>
</div>

Jika Anda ingin menutup dropdrown:

`$('#search-menu').closeDropdown();`

Di Bootstrap 4 Anda juga dapat melakukan ini:

$('#dd-link').on('hide.bs.dropdown', onListHide)

function onListHide(e)
{
  if(e.clickEvent && $.contains(e.relatedTarget.parentNode, e.clickEvent.target)) {
  e.preventDefault()
  }
}

di mana #dd-linkelemen jangkar atau tombol yang memiliki data-toggle="drowndown"properti.