İçeride tıklandığında açılır menüyü kapatın

Bir Twitter Bootstrap açılır menüm var. Tüm Twitter Bootstrap kullanıcılarının bildiği gibi, açılır menü tıklandığında kapanır (içinde tıklatarak bile).

Bundan kaçınmak için, açılır menüye kolayca bir tıklama olay işleyicisi ekleyebilir ve ünlüleri ekleyebilirim 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>

Bu kolay ve çok yaygın bir davranış carousel-controlsgibi görünmektedir carousel indicatorsve olay işleyicileri documentnesneye (ve aynı zamanda ) aktarıldığından, clickbu öğelerdeki olay ( önceki / sonraki denetimler, ...) “yoksayılır”.

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

Twitter Bootstrap açılır hide/ hiddenetkinliklerine güvenmek aşağıdaki nedenlerden ötürü bir çözüm değildir:

• Her iki olay işleyicisi için sağlanan olay nesnesi, tıklanan öğeye başvuru vermez
• flagSınıf veya öznitelik eklemek mümkün olmadığından açılır menü içeriği üzerinde kontrolüm yok

Bu keman normal bir durumdur ve bu keman edilir ile event.stopPropagation()ekledi.

Güncelleme

Cevabı için Roma'ya teşekkürler . Ayrıca aşağıda bulabileceğiniz bir cevap buldum .

Veri niteliğini kaldırma data-toggle="dropdown" açılır menünün açılması / kapatılmasını uygulamak bir çözüm olabilir.

İlk olarak, açılır menüyü açmak / kapatmak için bağlantıyı tıklatarak:

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

ve ardından bu şekilde kapatmak için açılır menünün dışındaki tıklamaları dinleyerek:

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

İşte demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

Bu da yardımcı olmalı

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

Bootstrap aşağıdaki işlevi sağlar:

                 | Bu olay, hide örnek yöntemi kullanıldığında hemen tetiklenir
hide.bs.dropdown | arandı. Geçiş yapan bağlantı elemanı,
                 | Etkinliğin relatedTarget özelliği.

Bu nedenle, bu işlevi uygulamak açılır listenin kapanmasını devre dışı bırakabilmelidir.

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

Mutlak en iyi cevap, sınıf açılır menüsünden sonra bir form etiketi koymaktır

yani kodun

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

Ayrıca bir çözüm buldum.

Twitter Bootstrap Componentsİlgili olay işleyicilerinin documentnesneye devredildiğini varsayarsak , ekli işleyicileri döngüye alır ve geçerli tıklatılan öğenin (veya üst öğelerinden birinin) temsilci seçili bir etkinlikle ilgili olup olmadığını kontrol ederim.

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

Umarım benzer bir çözüm arayan herkese yardımcı olur.

Yardımlarınız için hepinize teşekkürler.

Bu yardımcı olabilir:

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

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

Bu her koşulda işe yarayabilir.

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 :

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

Bu çözümle demonuz : http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

Bu basit şeyi denedim ve bir cazibe gibi çalıştı.

Değiştim açılır menü den eleman <div>için <form>ve iyi çalıştı.

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

Son zamanlarda benzer bir sorunum var ve veri özniteliğini kaldırarak data-toggle="dropdown"ve çağrı clickile dinleyerek sorunu çözmek için farklı yollar denedim event.stopPropagation().

İkinci yol daha çok tercih edilir. Ayrıca Bootstrap geliştiricileri de bu yolu kullanıyor. Kaynak dosyada açılır öğelerin başlatılmasını buldum:

// 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);

Yani, bu çizgi:

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

açılır menüyü kapatmamak için formsınıf içeren bir öğeyi sınıfın içine yerleştirmenizi önerir .dropdown.

Bootstrap, <form>açılır pencerelerdeki etiketler için desteklerinde bu sorunu kendileri çözdü . Çözümleri oldukça kavranabilir ve buradan okuyabilirsiniz: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

Belge öğesinde yayılmayı önlemek ve bunu yalnızca 'click.bs.dropdown.data-api'seçiciyle eşleşen türdeki olaylar için kaynar '.dropdown .your-custom-class-for-keep-open-on-click-elements'.

Veya kodda

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

Bootstrap 4.3 ile çalışmak için @ Vartan'ın cevabını değiştirdim. Çözümü, en son sürümle artık çalışmıyor çünkü targetözellik div, tıklama nereye yerleştirilirse yerleştirilsin açılır listenin kökünü döndürür .

İşte kod:

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

i olabildiğince akıllı ve fonksiyonel olmak için bir kez daha güncelledik. artık navın dışına geldiğinizde kapanıyor, içinde olduğunuzda açık kalıyor. sadece mükemmel.

Örneğin Bootstrap 4 Alpha'da bu Menü Etkinliği var. Neden kullanmıyorsunuz?

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

Açılır menüye tıklamanın tıklanmasını durdurabilir ve daha sonra atlıkarınca javascript yöntemlerini kullanarak atlıkarınca denetimlerini el ile yeniden uygulayabilirsiniz .

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

İşte jsfiddle .

Angular2 Bootstrap ile çoğu senaryo için nonInput kullanabilirsiniz:

<div dropdown autoClose="nonInput">

nonInput - (varsayılan), tıklatılan öğe bir girdi veya metin alanı olmadığı sürece öğelerinden herhangi biri tıklandığında açılır menüyü otomatik olarak kapatır.

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

Bu soru özellikle jQuery için olduğunu biliyorum, ama AngularJS kullanan herkes için bu sorunu var, bu işleyen bir yönerge oluşturabilirsiniz:

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
          });
        }
    };
});

Ardından dropdown-prevent-close, menüyü kapatmayı tetikleyen öğeye özniteliği eklemeniz yeterlidir ve bunu engellemelidir. Benim selectiçin menüyü otomatik olarak kapatan bir öğeydi:

<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] [Raylar] için, geliştirici raylar e.stopPropagation()için istenmeyen davranışlara yol açacaktır link_toile data-methoddeğil eşit getbunun gibi varsayılan dönüşü bütün isteğiniz olacak beri get.

Bu sorunu çözmek için evrensel olan bu çözümü öneriyorum.

$('.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>

Bazı javascript veya jquery kodu yazmak yerine (tekerleği yeniden icat etmek). Yukarıdaki senaryo, bootstrap otomatik kapanma seçeneği ile yönetilebilir. Otomatik olarak kapanacak değerlerden birini sağlayabilirsiniz :

1. her zaman - (Varsayılan) öğelerinden herhangi biri tıklandığında açılır menüyü otomatik olarak kapatır.

2. outsideClick - açılır menü yalnızca kullanıcı açılır menü dışındaki herhangi bir öğeyi tıkladığında otomatik olarak kapatır.

3. devre dışı - otomatik kapanmayı devre dışı bırakır

Aşağıdaki plunkr'a bir göz atın:

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

Ayarlamak

uib-dropdown auto-close="disabled" 

Bu yardımcı olur umarım :)

Zaten bir form kullanmayı öneren önceki bir cevap olduğunu biliyorum ama sağlanan biçimlendirme doğru / ideal değil. İşte en kolay çözüm, hiçbir javascript gerekmez ve açılır listenizi bozmaz. Bootstrap 4 ile çalışır.

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

Bu bana yardımcı oldu,

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

Menü öğesi ihtiyaçları aşağı Kişisel damla (böyle olması sınıfların bir not almak dropdown-menuve keepopen.

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

Yukarıdaki kod <body>, sınıfla birlikte özel öğeye değil , genel olarak teklif vermeyi engeller dropdown-menu.

Umarım bu birine yardımcı olur.

Teşekkürler.

Benim için en basit çalışma çözümü:

• keep-openaçılır kapanışa neden olmaması gereken öğelere sınıf ekleme
• ve bu kod parçası gerisini halleder:

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

Ben varsayılan bootstrap nav kullanarak istediğiniz gibi çözümler hiçbiri buldum. İşte bu sorunun çözümü:

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

Gelen .dropdowniçerik koymak .keep-openşöyle herhangi bir etikete sınıfı:

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

Önceki durumlar kap nesneleriyle ilgili olaylardan kaçındı, şimdi kap kapalı kalmadan önce sınıfı açık tut ve kontrol et.

Ben bununla yaptım:

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

Açılır pencereyi yalnızca önyükleme açılır listesinin dışında bir tıklama olayı tetiklendiyse kapatmak için, bu benim için işe yaradı:

JS dosyası:

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

HTML dosyası:

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

Olaylarınız yarıda kesileceğinden return false veya stopPropagation () yöntemini kullanırsanız bazı sorunlar yaşayabilirsiniz. Bu kodu deneyin, iyi çalışıyor:

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

HTML'de:

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

Dropdwnwn'u kapatmak istiyorsanız:

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

Bootstrap 4'te şunları da yapabilirsiniz:

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

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

burada özelliğe #dd-linksahip bağlantı öğesi veya düğme bulunur data-toggle="drowndown".