jQuery 可折叠标签索引

Question

使用 jquery.collapsible.js 我注意到在 expanded/closed 时 tabindex 没有改变。我几乎有一个解决方案，但如果有人可以改进这段代码，我将不胜感激，因为我确信有更好的方法来做到这一点。

$('.collapsible').each(function() {
 $('.collapsible').on('click',function(e) {
 if($('div').hasClass('collapsible collapse-open')) {
$('.collapsible.collapse-open').attr("tabIndex", 0);
 } else {
$('.collapsible.collapse-close').attr("tabIndex", -1);
}

});

});

问题是 tabindex 仅在第二次单击时发生变化，然后 0,-1 顺序错误。

Answer 1

如果您只是在寻找更好的方法，并且您的解决方案已经有效，您可以用它来简化它。您不需要使用 each 函数遍历每个 .collapsible 来添加 click 事件处理程序。

$(".collapsible").on('click', function (e) {
    var self = $(this);
    var tabIndex = self.hasClass("collapse-open") ? 0 : -1;
    self.attr("tabIndex", tabIndex); 
});

这将 select 任何具有 class collapsible 的元素，绑定点击事件，然后检查该元素是否具有 collapse-open class以确定要应用哪个选项卡索引。

Answer 2

感谢 Ihan 提供更高效的脚本。它现在正在工作我只需要将默认 class 从 'collapse-open' 更改为 'collapse-close'.

$(".collapsible").on('click', function (e) {
    var self = $(this);
    var tabIndex = self.hasClass("collapse-close") ? 0 : -1;
    self.attr("tabIndex", tabIndex); 
});

jQuery 可折叠标签索引

jQuery Collapsible tabindex

javascript

jquery

accessibility

tabindex