使用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”