苦苦挣扎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三次，之后只需要单击一次即可转到选项卡0，它不应该转到选项卡0，直到它被点击两次。

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

编辑3：

为了澄清，除非下拉列表处于活动状态，否则不应切换标签。下拉列表处于活动状态时，应根据单击的选项卡切换到正确的选项卡，然后关闭下拉列表。

Answer 1

你不能那样做，因为你过滤了 Document 上的每一次点击，然后将事件重定向到那些具有特定类的元素。这样你就不能对jQuery tabifier说一个元素充当tab和其他东西

我认为最好的方法是重新构建代码并重新开始使用不同的方法。

可以这样做，但我认为这就像是在欺骗代码。

修改

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

尝试使用class =“nav1”

从div中删除id =“tab0”