要素の外側をクリックしてドロップダウンを非表示にしないでください

Question

私はLiferayのドロップダウンボタンを使っています。

ブートストラップ自身2のLiferayの機能は、私は私は1つを開いたり、他が選出されたボタンに依存0

の1を作成し、私のために動作しませ。そして私がアイテムを計算すると、私の隠れます。

しかし、私はhtmlの外のどこかをクリックすると、私はドロップダウンを隠すだけです。

それは私に失敗ですか？

HTML

<div id="desplegableBoton"> 
    <div class="btn-toolbar"> 
     <div class="btn-group"> 
      <button data-toggle="dropdown" class="btn dropdown-toggle">Configurar <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Cambio de canal Wifi</a></li> 
       <li><a href="#">Recuperación de contraseña wifi</a></li> 
       <li><a href="#">Velocímetro</a></li> 
       <li><a href="#">Contratar upgrade</a></li> 
      </ul> 
     </div><!-- /btn-group --> 

     <div class="btn-group"> 
      <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Consultar <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Cambio de canal Wifi</a></li> 
       <li><a href="#">Recuperación de contraseña wifi</a></li> 
       <li><a href="#">Velocímetro</a></li> 
       <li><a href="#">Contratar upgrade</a></li> 
      </ul> 
     </div><!-- /btn-group --> 
    </div>  
</div> 

jQueryの

desplegable: function() { 
     $('.btn').unbind().click(function(){ 
      $('.btn.active').next('.dropdown-menu').slideUp(); 
      $('.btn.active').removeClass('active'); 
      $(this).stop().toggleClass('active'); 
      $(this).next('.dropdown-menu').stop().slideToggle(); 
      $('body').on('click', function (e) { 
        if (!$('.btn.active').is(e.target) && $('.btn.active').has(e.target).length === 0 && $('.active').has(e.target).length === 0) { 
             $('.btn.active').removeClass('active'); 
         console.log("aaa"); 
        } 
       }); 
     }); 
     } 

Answer 1

あなたは何か他のものがクリックされたときを検出するためにblur()を使用して試みることができます。

：

blur()は要素はあなたが対話し、項目の外をクリックした場合ことを意味し、「フォーカスを失った」ときに呼び出される関数、blur()は、これはあなたを助けるかもしれない

と呼ばれています

$('#desplegableBoton').blur(function(){ 
    $('.dropdown-menu').slideUp(); 
});