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

Question

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

Answer 1

演出活动对此不起作用怎么办？因为你不知道隐藏了哪一个？

也许甚至选择事件也可能是您想要的。

使用“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
         }
    }
});

Answer 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活动。