用jQuery UI顯示隱藏可排序

如何在用戶點擊任何標題時儘量減少和最大化標題選項。我不擅長jQuery。用jQuery UI顯示隱藏可排序

enter image description here

我的例子鏈接：jsfiddle

我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jsFiddle demo</title> 

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 

<style type='text/css'> 
body { 
    min-width: 520px; 
} 
.column { 
    width: 170px; 
    float: left; 
    padding-bottom: 100px; 
} 
.portlet { 
    margin: 0 1em 1em 0; 
} 
.portlet-header { 
    margin: 0.3em; 
    padding-bottom: 4px; 
    padding-left: 0.2em; 
} 
.portlet-header .ui-icon { 
    float: right; 
} 
.portlet-content { 
    padding: 0.4em; 
} 
.ui-sortable-placeholder { 
    border: 1px dotted black; 
    visibility: visible !important; 
    height: 50px !important; 
} 
.ui-sortable-placeholder * { 
    visibility: hidden; 
} 
</style> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(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(); 
}); 
});//]]> 
</script> 


</head> 
<body> 
    <div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Feeds</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
    <div class="portlet"> 
     <div class="portlet-header">News</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 
<div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Shopping</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 
<div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Links</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
    <div class="portlet"> 
     <div class="portlet-header">Images</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 
</body> 
</html>

我會感激如果有人可以幫助我:)

來源

2013-07-09 Manan

當你點擊它已經減少了''+/-標題旁... – stackErr

都是這個：http： //jsfiddle.net/3J5RQ/ – stackErr

您應該使用slideToggle（）以獲得更好的效果：http://jsfiddle.net/cjhAE/4/ –

如果你正在尋找使用整個標題欄，而不僅僅是+/-圖標，更改：

$(".portlet-header .ui-icon").click(function() { 
    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); 
    $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
});

到

$(".portlet-header").click(function() { 
    $(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); 
    $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
});

jsFiddle example

來源

2013-07-09 15:11:46 j08691

DEMO

$(".portlet-header").click(function() { 
     $(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); 
     $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
    });

來源

2013-07-09 15:12:58

用jQuery UI顯示隱藏可排序

回答

相關問題