jQuery UI 选项卡，选择/取消选择（折叠）事件答案

【问题标题】：jQuery UI tabs, select/unselect (collapse) eventsjQuery UI 选项卡，选择/取消选择（折叠）事件
【发布时间】：2011-05-03 15:10:07
【问题描述】：

我正在使用 jQuery UI 1.8.5 选项卡插件，具有 collapsible : true 配置。我需要在折叠选项卡后调用一个函数来添加一个 CSS 类。有人知道怎么做吗？

【问题讨论】：

标签： jquery events tabs collapse unselect

【解决方案1】：

show event 对此不起作用怎么办？因为你不知道隐藏了哪一个？

也许select event 可能就是您想要的。

使用'tabsselect' 事件：

$(".selector").tabs({
    collapsible: true,
    select: function(event, ui)
    {
         var prevSelectedIndex = $(".selector").tabs('option', 'selected');
         var nextSelectedIndex = ui.index;

         if(prevSelectedIndex === -1)
         {
             // It was previously collapsed and the user is now opening
             // tab at index: nextSelectedIndex 
         }
         else if(prevSelectedIndex === nextSelectedIndex )
         {
              // The user has clicked on the currently opened
              // tab and it is collapsing
         }
    }
});

【讨论】：

我遇到了这个问题并使用了您的答案。我添加了一个代码 sn-p 以显示我如何使用它以供将来参考。

【解决方案2】：

您可以在点击时检查ui-tabs-selected 类是否存在。假设您使用的是标准标记：

// in your click event
var selected_exists = $('#yourTabBox')
    .children('ul.ui-tabs-nav')
    .children('li.ui-tabs-selected')
    .length;

if (selected_exists) {
    // Nothing is collapsed
} else {
    // collapsed
}

这非常适合select 活动。

【讨论】：

@Stephen ...估计他可能会向我们展示他尝试过的东西还是什么？ ;) ... 肯定会很高兴知道他在打什么吧？
@drachenstern：同意。如果我们所描述的内容不起作用，我们将需要查看一些已尝试的示例以及一些标记。
不错的答案（如果我还有任何选票，+1！）。请注意，在select 事件中，this 是外部 div 元素，因此您的代码可以简化为$(this).children('ul.ui-tabs-nav > li.ui-tabs-selected').length。更快更灵活。
这行得通，我已经看到了另一个问题，答案是相似的，这个解决方案似乎是一种解决方法，而不是一个可靠的事件触发，例如。 '崩溃'。无论如何，谢谢你们！
实际上，这几乎奏效了，但问题是，您不能真正依赖该类，因为它在选择事件后应用“ui-tabs-selected”