几个小时以来，我一直在尝试向 jQuery Accordion 元素标题的右侧添加一个额外的图标。我有以下代码，但有 3 个问题:
1) 折叠时我的元素标题高度为 0
2) 后面的item title的位置偏了，比如我例子中的“Section 2”。
3) 我的元素内容中显示了一个箭头
4) 我想尽可能避免硬编码尺寸和位置
我的代码(你可以从这里下载所有必要的文件:http://dl.dropbox.com/u/12893123/accordion.zip)是这样的:
<html>
<head>
<script language="JavaScript" src="jquery.js"></script>
<script language="JavaScript" src="jquery-ui.custom.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.17.custom.css"></script>
</head>
<body>
<script>
$(function() {
var stop = false;
$( "#accordion div" ).click(function( event ) {
if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$( "#accordion" )
.accordion({
header: "> div > div"
})
.sortable({
axis: "y",
handle: "div",
stop: function() {
stop = true;
}
});
});
</script>
<style type="text/css">
div.div1 {
background: red;
position:relative;
}
div.div2 {
background: green;
float: left;
}
div.div3 {
background: yellow;
float: right;
}
div.div4 {
clear: both;
}
</style>
<div id="accordion">
<div>
<div class="div1"><div class="div2"><a href="#">Section 1</a></div><div class="div3"><img src="delete_icon.gif"></img></div></div>
<div class="div4">
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
</div>
<div>
<div><a href="#">Section 2</a></div>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
</div>
<div>
<div><a href="#">Section 3</a></div>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div>
<div><a href="#">Section 4</a></div>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</div>
</body>
</html>
最佳答案
终于找到解决办法了。我刚刚将 overflow: auto; 添加到 div1 并解决了所有问题。
关于javascript - 带有右侧删除图标的 jquery Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9062318/