[英]jQuery UI - sortable accordion not working
我制作了一個可排序的嵌套手風琴,但是有些東西無法正常工作。 在id'accordian2'中,每個項目的高度都太小,並且顯示了垂直滾動條。 該項目的值為“ 1”正在被裁剪,因此僅顯示一半。
有人可以告訴我代碼中的問題是什么嗎?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3'
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
create_accordian('#accordion');
create_accordian('#accordion1');
create_accordian('#accordion2');
//create_accordian('#accordion3');
});
</script>
<style type='text/css'>
/*demo page css*/
#accordion { font: 62.5% 'Trebuchet MS', sans-serif; margin: 10px;}
</style>
<div id='accordion'>
<div class='group'>
<h3>
<a href='#'>1. blah</a>
</h3>
<div>
<div id='accordion1'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
4900bc3b-a086-4d0c-89b8-09e3724aac8e
</span>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
0d59f87e-a294-4f85-beae-a0e266ab6a7e
</span>
</div>
</div>
</div>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>2. blah</a>
</h3>
<div>
<div id='accordion2'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@omega,在手風琴腳本中將autoHeight選項設置為false。 例如。
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3',
autoHeight: false // set this to false
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.