jQuery可折叠tabindex

Question

Using jquery.collapsible.js I notice that the tabindex does not change when expanded/closed. I nearly have a solution but would appreciate it if someone could improve on this piece of code as I am sure there is a better way to do this.

$('.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);
}

});

});

The problem is the tabindex only changes on the second click and then the 0,-1 order is wrong.

Answer 1

If you're just looking for a better way, and your solution already works, you could simplify it with this. You don't need to loop through each .collapsible with the each function just to add the click event handler.

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

This will select any element with the class collapsible , bind the click event, and then check if that element has the collapse-open class to determine which tab index to apply.

Answer 2

Thanks to Ihan for the more efficient script. It is working now I just had to change the default class from 'collapse-open' to 'collapse-close'.

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