Question

我有一个jQuery扩展Div元素的代码：

$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');

//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });

//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');

// The Accordion Effect
$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }

    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
});

return false;
});

此代码仅允许一次打开一个div。（当打开一个并且我点击另一个时，第一个关闭。）如何修改它以便我可以在任何给定时间打开（展开）多个div。

非常感谢

Answer 1

在代码中查看我的评论。如果这不起作用。请小提琴，以便我们更好地理解问题

$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        // I think this line is the one thats toggling everything and closing 
        //all the open ones so try commenting it out
        //$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }

    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
});

扩展/折叠Div

1 个答案: