允许使用jQuery打开最大数量的手风琴部分

Allowing for maximum number of opened accordion sections using jQuery

本文关键字：手风琴部 最大数 许使用 jQuery      更新时间：2023-09-26

我在网上找遍了，似乎找不到一个好的方法来做到这一点。

我有一个手风琴菜单，我已经建立主要使用addClass/removeClass和css。它有特殊的功能，手风琴标签打开后延迟鼠标悬停，他们打开和关闭点击。我目前可以一次打开所有的面板，但我希望将其限制为2或3，并在我达到该限制后最早选择的面板关闭。因此，我要么需要为类编号并在每次操作时切换它们，要么可能应用一个变量来跟踪选择面板的顺序并切换它们。

下面是我到目前为止的代码。我只能算出目前有多少标签是打开的。有人知道最好的方法是什么吗?

var timer;
var counter = 0;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
    timer = setTimeout ( function () {
        $(dd_item).addClass('expand-tab');
        counter++;  
        }, 200);    
    };
}).mouseleave(function(){
    clearTimeout(timer);
    console.log(counter);
}).click(function() {
    if ($(this).hasClass('expand-tab')){
        $(this).removeClass('expand-tab');
        counter--;
        console.log(counter);
    }else{
        $(this).addClass('expand-tab');
        console.log(counter);
    }
});

为每个打开的选项卡添加一个递增的data-index

对悬停效果结束时的选项卡计数，如果它们太多，按索引排序，并隐藏最低/最老的。

var timer; 
    var index = 1;
    $('li.has-dropdown').mouseenter(function() {
    dd_item = $(this);
    if(!$(this).hasClass('expand-tab')){
        timer = setTimeout ( function () {
            $(dd_item).addClass('expand-tab');
            $(dd_item).attr('data-index', index++);
            counter++;  
            }, 200);    
        };
    }).mouseleave(function(){
        clearTimeout(timer);
        console.log(counter);
    }).click(function() {
        $(this).taggleClass('expand-tab'); // see jQuery  toggleClass();
        $(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
    });

    if($('.expand-tab').length> 3){
        //custom inline sorting function.
        var expanded_tabs = $('.expand-tab').sort(function (a, b) {
          return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index')) ? -1 :  1 ;
        });
        //time out .. effect etc.
        expanded_tabs[0].removeClass('expand-tab');
    }

p。我不喜欢鼠标悬停和点击在同一个地方…尝试分离事件并在每个事件上调用统一的collapseIfToMany函数

这是更正版。我决定为打开的最大面板使用一个变量，这样你就不必挖掘，如果你决定要改变它，或者如果你添加更多的代码。

    var timer; 
var index = 1;
var maxOpen = 2;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
    timer = setTimeout ( function () {
        $(dd_item).addClass('expand-tab');
        $(dd_item).attr('data-index', index++);
        collapseIfTooMany();
        }, 200);    
    };
}).mouseleave(function(){
    clearTimeout(timer);
}).click(function() {
    $(this).toggleClass('expand-tab'); // see jQuery  toggleClass();
    $(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
});
function collapseIfTooMany(){
    if($('.expand-tab').length > maxOpen){
        //custom inline sorting function.
        var expanded_tabs = $('.expand-tab').sort(function (a, b) {
          return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index'))) ? -1 :  1 ;
        });
        //time out .. effect etc.
        $(expanded_tabs[0]).removeClass('expand-tab');
    }
};
相关文章：