我制作了一个嵌套的可排序 Accordion ，但有些东西不起作用。在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，在 Accordion 脚本中将 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' );
}
});
}
关于javascript - jQuery UI - 可排序的 Accordion 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12059252/