Question

我有以下脚本可以很好地运行：

$(".btnMinimize").live('click', function(event) {
    event.preventDefault(); 

    $( this ).parents( ".portlet" ).find( ".portlet-sub-header" ).toggle();
    $( this ).parents( ".portlet" ).find( ".portlet-content" ).toggle();
    $( this ).parents( ".portlet" ).find( ".portlet-footer" ).toggle();
});

.btnMinimize位于带有.portlet-header类的div标记内。

单击此按钮时，如何切换样式表类，这样可以切换所单击按钮的图像，因此它应该从最小化图标更改为最大化图标。

现在按钮被分配了类.btnMinimize，它应该切换到.btnMaximize，同时记住按钮状态将是数据库生成的，即如果portlet 1的按钮是最小化的，并且对于portlet 2是最大化的，它应该适当地切换。

我不确定这是否是最好的方法，所以请随意提出更好的方法。

Answer 1

从jQuery文档中，评估条件，然后选择是否需要显示/隐藏元素。这样做可以确保您切换功能的行为。

if ( showOrHide == true ) {
    $('#foo').show();
} else if ( showOrHide == false ) {
    $('#foo').hide();
}

来源：http://api.jquery.com/toggle/

Personnaly，我发现这样做的方式更灵活。

Answer 2

你会想要toggleClass：

$(".btnMinimize").live('click', function(event) {
    event.preventDefault(); 

    $( this ).parents( ".portlet" ).toggleClass('collapse');
});

还有一些CSS：

.collapse .portal-sub-header,
.collapse .portal-content,
.collapse .portal-footer {
    display: none;
}

切换课程？

2 个答案: