使用jQuery UI選項卡掙扎

Question

原題：

下正常工作：

http://jsfiddle.net/oshirowanen/KYqyU/1/

也就是說，如果我點擊選項卡，然後單擊選項卡0，1，或2，它將在jquery ui選項卡控件中顯示正確的選項卡。

然而，我不想在下拉的標籤0，我希望它爲主體的按鈕來激活的下拉，然後顯示了選項卡1和2，像這樣：

http://jsfiddle.net/oshirowanen/KYqyU/3/

但是當我這樣做，如果我點擊標籤0，它不能正常工作。它應顯示選項卡0時，選項卡0單擊兩次。那麼當我點擊它兩次，沒有任何反應，它似乎停止其他標籤工作。

我在做什麼錯？

編輯1：

看來標籤0被點擊3次，當切換到製表0，但我這樣做的時候，所有其他選項卡停止工作

編輯2：

我改進了一點，通過更正類名問題，在jquery中，它是「item」而不是「items」。然而，現在當我點擊標籤0三次後，它只需要1次點擊去標籤0，它不應該去標籤0，直到它被點擊兩次。

http://jsfiddle.net/oshirowanen/KYqyU/21/

EDIT 3：

只是爲了澄清，應該不存在標籤交換除非下拉處於活動狀態。當下拉菜單處於活動狀態時，應該根據點擊哪個按鈕切換到正確的選項卡，然後關閉下拉菜單。

Answer 1

你不能做到這一點，那是因爲你過濾每點擊日文檔，之後重定向事件那些具有特定類的元素。這樣，你不能說jQuery的tabifier到一個元素作爲選項卡和其他的東西

我認爲最好的方法是重新構造代碼，並用不同的方法重新開始。

它可以這樣做，但我認爲這就像欺騙代碼。

編輯：

http://jsfiddle.net/KYqyU/56/

$(document).ready(function(){ 
$("#tabs").tabs(); 
$(".ui-tabs-nav").hide(); 

$("#tab0").click(function() {if($(this).hasClass("active"))$("#tabs").tabs("select" , 0);}); 
$("#tab1").click(function() {$("#tabs").tabs("select" , 1);}); 
$("#tab2").click(function() {$("#tabs").tabs("select" , 2);}); 

$(document).click(function(event) { 
    $('.nav1.active, .nav2.active').trigger('click', true); 
    $('.nav1, .nav2').removeClass("active"); 
}); 

$('.dropdown').each(function() { 
    $(this).css('left', $(this).prev().position().left); 
}); 

$('.nav1, .nav2').click(function(event, isTrigger) { 
    $(this).siblings('.nav1.active, .nav2.active').trigger('click', true); 

    if(!isTrigger && $(this).hasClass('active')){ 
     if ($(this).hasClass('nav1')) { 
      /*alert("nav1 was clicked");*/ 
     } 
     else if($(this).hasClass('nav2')) { 
      /*alert("nav2 was clicked");*/ 
     } 
    } 

    $(this).toggleClass('active').next().toggle(); 
    event.stopPropagation(); 
}); 

$('.nav1, .nav2').disableSelection(); 

$('.items').click(function() { 
    $(this).parent().toggle(); 
    $('.nav1.active, .nav2.active').removeClass('active'); 
}); 

}）;

Answer 2

嘗試從與類=「NAV1」在div刪除ID =「TAB0」