web-gelistirme-sc.com

Yalnızca bir açılır düğmenin tıklandığında kapanmasını durdur

Bir düğme açılır penceresine sahibim (sadece bir tane, hepsine değil) ve bunun içine, insanların üzerini tıklar tıklamaz gizlemeden aşağıya gizlenmeden içeri girebilecekleri birkaç girdi alanına sahip olmak istiyorum (ancak dışına tıklayın).

Bir jsfiddle yarattım: http://jsfiddle.net/denislexic/8afrw/2/

Ve işte kod, temel:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

Bu yüzden, temelde, açılan menüye tıklanıp kapanmamasını istiyorum (ancak işlem düğmesine tıklandığında veya açılır pencerenin dışında). Şimdiye kadarki en iyi tahminim, ona bir sınıf eklemek ve biraz JS yapmaya çalışmaktı, ama çözemedim. 

Herhangi bir yardım için teşekkürler. 

46
denislexic

Sorun, boostrap açılır jQuery eklentisinin, başka bir yere tıkladığınızda bırakılan menüyü kapatmasıdır. Bu davranışı, açılır menü öğenizdeki click olaylarını yakalayarak ve body element üzerindeki click olay dinleyicilerine ulaşmasını engelleyerek devre dışı bırakabilirsiniz.

Sadece ekle

$('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​

jsfiddle bulunabilir burada

110
CraigTeegarden

Bu sorunun Angular için olmadığını biliyorum, ancak Angular'ı kullanan herkes için etkinliği HTML'den aktarabilir ve $ event aracılığıyla yayını durdurabilirsiniz:

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>
39
parliament

Aslında, Angular.js'deyseniz, bunun için bir yönerge yapmak daha zarif olurdu:

app.directive('stopClickPropagation', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.click(function(e) {
                e.stopPropagation();
            });
        }
    };
});

Ve sonra, açılır menüde yönergeyi ekleyin:

<div class="dropdown-menu" stop-click-propagation> 
    my dropdown content...
<div>

Özellikle birden fazla fare olayı için yayılımını durdurmak istiyorsanız:

...
element.click(function(e) {
    e.stopPropagation();
});

element.mousedown(...
element.mouseup(...
...
5
Nahn

Başka bir hızlı çözüm, sadece dropdown-menu sınıfına sahip olan div'ye onclick niteliğini ekleyin:

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
5
Hassan Talha

Birçok teknik denedikten sonra, kullanılabilecek en iyi yöntemin, bunun hiçbir dezavantaj yaratmadığını gördüm:

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

Bu da açılır pencerelerin içindeki iç elementler için bazı canlı ciltler yapmanızı sağlar.

1
Julian Xhokaxhiu

Bu sorun vardı ama bir tepki bileşeninde - tepki bileşeninin bir önyükleme açılan menüsünde bir form vardı. Aşağı açılır öğenin içindeki bir öğeye her tıklandığında kapanır ve formda herhangi bir şey girilmesine neden olur.

Olağan e.preventDefault() ve e.stopPropagation(), jquery olayının hemen başlatılmasından ve bundan sonra müdahale etmeye çalışmaktan dolayı reaksiyon uygulamasında çalışmaz.

Aşağıdaki kod sorunumu çözmeme izin verdi.

stopPropagation: function(e){
    e.nativeEvent.stopImmediatePropagation();
}

veya ES6 formatında

stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}

Umarım bu tepki olarak kullanmaya çalışırken diğer cevaplarla mücadele eden herkes için faydalı olabilir.

0
Sprose

ayrıca, bir düğme öğesini tıklatmadıkça tıklamayı önleme 

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
0
Elise Chant