我已经实现了2种Accordians为有一个问题我的应用 - 1列和2列手风琴元素身高问题
林与1分的列手风琴的静态高度。我一直试图整天修改JavaScript,但似乎无法使它工作。
高地应该在根据数据量高度动态的,但是如可以看到高度是固定的,并且一些数据被得到切断: http://www.davincispainting.com/whydavincis.aspx
其他2列手风琴具有几乎相同的JavaScript作为1列手风琴,但是高度dynanmic取决于有多少数据是: http://www.davincispainting.com/glossary.aspx
我会提供一个小提琴但是现在数据动态:
这里是JavaScript的问题手风琴:
<script type="text/javascript">
$.fn.accordion = function() {
return this.each(function() {
$container = $('#mid-featureleft-client');
$container.find("dt").each(function() {
var $header = $(this);
var $selected = $header.next();
$header.click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
if ($selected.is(":visible")) {
$selected.animate({
height: 0
}, {
duration: 300,
complete: function() {
$(this).hide();
}
});
} else {
$unselected = $container.find("dd:visible");
$selected.show();
var newHeight = heights[$selected.attr("id")];
var oldHeight = heights[$unselected.attr("id")];
$('<div>').animate({
height: 1
}, {
duration: 300,
step: function (now) {
var stepSelectedHeight = Math.round(newHeight * now);
$selected.height(stepSelectedHeight);
$unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
},
complete: function() {
$unselected.hide().css({
height: 0
});
}
});
}
return false;
});
});
// Iterate over panels, save heights, hide all.
var heights = new Object();
$container.find("dd").each(function() {
$this = $(this);
$this.css("overflow", "hidden");
heights[$this.attr("id")] = $this.height();
$this.hide().css({
height: 0
});
});
});
};
$(document).ready(function() {
$.getJSON('FaqsJson.ashx?factType=2', function (datas) {
var str_one = "";
str_one = "<dl>"
$.each(datas, function() {
str_one += "<dt class=\"glossquestion\"><a href=\"javascript://\" class=\"questionLink\">" + this['Question'] + "</a></dt>";
str_one += "<dd class=\"glossanswer\" style=\"-webkit-margin-start:0px\"><div class=\"answerbox\">" + this['Answer'] + "</div></dd>";
});
str_one += "</dl>";
$("#glossary_first").html(str_one);
$("#mid-featureleft-client").accordion();
});
});
</script>
这里是培训相关HTML:
<div id="mid-feature-client">
<div id="mid-featureleft-client">
<div id="glossary_first" class="controlbox">
<br /><br />
</div>
<div style="clear: both;">
</div>
</div>
</div>
这里是培训相关的CSS:
#mid-featureleft-client .controlbox {
width:546px;
padding:3px 0 0 6px;
position:relative;
/*background-color:green;*/
}
#mid-featureleft-client .glossarycontrolbox {
width:260px;
padding:3px 0 0 6px;
position:relative;
float:left;
/*background-color:blue;*/
}
.question-clicked {
background-color: #CCCCCC;
color: #0C2A55;
/*margin-top: 10px;*/
/*padding: 2px 5px 0;*/
}
.questionLink-clicked {
color: #0C2A55;
font-size: 1.2em;
font-weight: bold;
}
.answerbox {
padding: 3px 5px 3px 5px;
}
.questionLink {
color: #0C2A55;
font-size: 1.2em;
font-weight: bold;
}
.glossquestion {
padding: 0 5px 4px 0;
}
.glossanswer {
background-color: #F9FBFC;
display: none;
}
#accordion .handle {
width: 260px;
height: 30px;
background-color: orange;
}
#accordion .section {
width: 260px;
height: 445px;
background-color: #a9a9a9;
overflow: hidden;
position: relative;
}
dt {
/*background-color: #ccc;*/
}
dd {
/*height: 30px;*/
}
.active {
background: #a9a9a9;
}
它似乎有诀窍,虽然它截断了其中一个数据 - “强烈推荐”,其中有一个单词换行。高度不适应包装到下一行的单个单词。 – Paul 2011-05-26 01:52:27
你是否将新版本直播?这样,检查起来会更容易。另外,这只是让我头脑发热:离开原来的JavaScript会更好,并且用你的服务器端代码为每个dd添加一个唯一的'id'(就像你在您的术语表页面上做)。 – thirtydot 2011-05-26 01:56:48
@保罗:我补充说明了我在说什么。如果你不能实现它,那么就坚持你拥有的东西。 – thirtydot 2011-05-26 09:52:49