避免點擊觸發聚焦

Question

我正在爲我的表單的選項卡按鈕功能。

我正在使用插件來定製我的表單的所有選擇，但現在我陷入了衝突。

這是我寫的使用上選擇tab按鈕來顯示我的下拉菜單列表中的代碼

$styledSelect.focus(function(e) { 
    var dropdown = $(this).next('ul'); 
    dropdown.show(); 
}); 

$styledSelect.focusout(function(e) { 
    var dropdown = $(this).next('ul'); 
    dropdown.hide(); 
}); 

的問題是，任何點擊事件觸發事件的內容，所以我真的不能選擇任何選項我的選擇標籤，因爲下拉列表首先被隱藏。

你可以看到這裏的問題http://codepen.io/Mannaio/pen/tLaup

我怎樣才能解決這個問題？

Answer 1

您可以設置一個點擊集中處理和再利用上是相同的邏輯。

function setFocus(e) { 
    e.stopPropagation(); 
    $('div.select-styled.active').each(function() { 
    $(this).removeClass('active').next('ul.select-options').hide(); 
    }); 
    $(this).toggleClass('active').next('ul.select-options').toggle(); 
}; 

$styledSelect.click(setFocus); 

$styledSelect.focus(setFocus); 

更新CodePen：http://codepen.io/anon/pen/kcpqd

Answer 2

工作過Burntforest的答案（佔Tab鍵出來的時候不關閉的下拉菜單）：

function getFocus(e) { 
    e.stopPropagation(); 
    hideAllLists(); 
    $(this).toggleClass('active').next('ul.select-options').toggle(); 
}; 

function hideAllLists() { 
    $('div.select-styled.active').removeClass('active') 
           .next('ul.select-options').hide(); 
} 

$styledSelect.click(getFocus); 
$styledSelect.focus(getFocus); 

$(document).keydown(function(e) { 
    if (e.keyCode === 9) 
     hideAllLists(); 
}); 

http://codepen.io/anon/pen/BqEkz