jquery - 带有最小化和最大化的 jQuery UI 可排序

Question

我正在为我当前的项目使用 jQuery UI Sortable，我刚刚从 jQuery 站点找到，我想将Feed最大化，而其他的则最小化。

我的 jsFiddle：jsFiddle

有什么想法或建议吗？谢谢。

我的代码：

$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content");
    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});

Answer 1

给一个 ID 喂 div 并添加这 3 行，DEMO http://jsfiddle.net/yyene/7DM3Q/2/

// to open only feed
$('.portlet-content').css({'display':'none'});
$('#feed .portlet-content').css({'display':'block'});
// to change plus icon of feed
$("#feed .portlet-header span").removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");

查询

$(function () {
    $('.portlet-content').css({'display':'none'});
    $('#feed .portlet-content').css({'display':'block'});
    
    $(".column").sortable({
        connectWith: ".column"
    });
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");
    
    $("#feed .portlet-header span").removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
    
    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});