如何防止在單擊內部時丟失焦點的下拉菜單

Question

我有一個小提琴，它具有顯示選項卡形式的下拉列表。

注意：您看不到選項卡，但如果將鼠標懸停在頂部，則會看到有4個選項卡。

想法是，用戶可以選擇一個選項卡，然後填寫表單。

目前，如果你點擊一個標籤，它將失去焦點，下拉消失。如果您再次點擊「某個標題」鏈接，您會注意到您選擇的標籤已被正確選中，但失去了焦點。

<div class="dropdown"> 
     <a class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Some title</a> 

     <div class="dropdown-menu dropdown-menu-right subscribe-box" aria-labelledby="dropdownMenu1"> 

      <ul class="nav nav-pills" id="myTab"> 
      <li class="active"><a href="#" data-target="#mail" data-toggle="tab"><i class="fa fa-envelope-o"></i></a></li> 
      <li><a href="#" data-target="#twitter" data-toggle="tab"><i class="fa fa-twitter"></i></a></li> 
      <li><a href="#" data-target="#sms" data-toggle="tab"><i class="fa fa-commenting"></i></a></li> 
      <li><a href="#" data-target="#rss" data-toggle="tab"><i class="fa fa-rss"></i></a></li> 
      </ul> 

      <div class="tab-content"> 
      <div class="tab-pane active" id="mail"> 
       <p>Enter your email address.</p> 
       <div class="row"> 
       <div class="col-sm-8 input-box"> 
        <input placeholder="name@email.com" type="text"> 
       </div> 
       <div class="col-sm-4 input-button"> 
        <a href="" class="btn">Subscribe</a> 
       </div> 
       </div> 
      </div> 

      <div class="tab-pane" id="twitter"> 
       <p>Enter your twitter username</p> 
       <input placeholder="@username" type="text"> 
      </div> 

      <div class="tab-pane" id="sms"> 
       <p>phone</p> 
       <input placeholder="555-123-4567" type="text"> 
      </div> 

      <div class="tab-pane" id="rss"> 
       <p>rss link</p> 
      </div> 
      </div> 

     </div> 
     </div> 

    </div> 

https://jsfiddle.net/zr6q6bsm/

什麼我需要修改，以便當您選擇下拉里面任何東西，它不會失去焦點。

Answer 1

，我認爲這可以幫助你：

添加到您的網頁

<script> 
    $(document).ready(function(){ 
     $('#myTab li a').click(function(){ 
     setTimeout(function(){ 
      $('.dropdown-menu').show(); 
     }, 0); 
    }) 
    }); 
</script> 

Answer 2

技術上，失去焦點無關什麼是怎麼回事。發生的是click事件，您的下拉菜單關閉。你想防止這一點。

通常情況下，一個簡單的...

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

...就行了。它可以防止關閉下拉菜單。但是，它也會停止標籤內的傳播，不幸的是，Bootstrap標籤依賴事件傳播正常工作。

因此，我們需要做的，是要stop.propagation()，但重新觸發正在上click綁定在當前e.target任何事件，就像這樣：

$('.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) { 
      if($(event.target).is(events[i].selector)) { 
       events[i].handler.call(event.target, event); 
      } 
      $(event.target).parents(events[i].selector).each(function(){ 
       events[i].handler.call(this, event); 
      }); 
     } 
    } 
    event.stopPropagation(); 
}); 

這是你更新的提琴：https://jsfiddle.net/aa7xdvfk/

上面的腳本改編自this answer。關於它的一個很酷的部分是它允許元素內的所有事件傳播，以阻止事件傳播冒泡。並且它會允許任何事情取決於你的下拉菜單中的click冒泡工作（即：彈出，手風琴，標籤）。