定制手风琴内容divs共享相同的大小，不明白为什么 [英] Custom accordion content divs all share same size, no idea why
问题描述
我正在建立一个网站并发现这个定制的手风琴版本使用jQuery（基本上，我希望同时打开多个容器），现在我发现无论其内容如何，所有容器都具有相同的大小（所以如果我在顶部容器中有内容，那么所有3个都有很高的高度）。我缺少什么，以及如何让每个容器扩展到它的内容？感谢您的帮助
I'm building a website and found this custom accordion build with jQuery (basically, I want to have multiple containers open at the same time), and now I figured out that regardless of their content, all containers share the same size (so if I have content in the top container, all 3 will have a big height). What am I missing, and how do I get every container to scale to it's content? thanks for the help
由于本地jQuery-UI文件因为本地jQuery-UI文件没有正确显示，我已经上传了整个内容这里。
Since the fiddle isn't displaying correctly because of the local jQuery-UI files I've uploaded the whole thing here.
$('#accordion').accordion({
collapsible: true,
active: 1,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) {
currContent.slideUp();
} else {
currContent.slideDown();
}
return false; // Cancels the default action
}
});
$(document).ready(function() {
$(document).tooltip();
$(".btn").button();
$("#dialog").dialog();
$("#dialog").dialog("close");
$("#check1").button();
$("#check2").button();
});
$("#loadFile").click(function() {
$("#dialog").dialog("open");
})
#cardbox,
#previewbox {
border: 1px solid black;
display: inline-block;
}
#cardbox {
width: 80%;
}
#previewbox {
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="accordion">
<h3 title="This is where the cards you draft from will appear when the draft file is loaded.">Cards</h3>
<div>
<div id="cardbox">BLAH</div>
<div id="previewbox">BLAH</div>
</div>
<h3>Control Box</h3>
<div>
<form id="controlbox">Draft number:
<input type="text" placeholder="#" title="In case you are uploading a draft from file, leave this field blank. Otherwise please input your draft number and click the search button.">
<input type="submit" value="Search for Draft" class="btn">
<button type="button" class="btn" id="loadFile">Load from file</button>
Other Options:
<input type="checkbox" id="check1">
<label for="check1">Show Previous Picks</label>
<input type="checkbox" id="check2">
<label for="check2">Use Timer</label>
</form>
</div>
<h3 title="This is where the cards you pick will appear.">Picks Log</h3>
<div>This is where your picks will be displayed</div>
</div>
<div id="dialog" title="Upload Draft Log" class="filePrompt">
<form>Click the browse button in order to select the log file on your hard-drive.
<br>
<br>
<input type="file" id="draftLogInput">
</form>
</div>
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
<script src="js/import.js"></script>
</body>
推荐答案
面板的高度由手风琴的 heightStyle 属性，它有三个可能的值：
The height of the panels is controlled by the accordion's heightStyle property, which has three possible values:
auto：所有面板都将设置为最高面板的高度。
"auto": All panels will be set to the height of the tallest panel.
fill：根据可用高度扩展到可用高度手风琴的父母身高。
"fill": Expand to the available height based on the accordion's parent height.
内容：每个小组的内容都与其内容一样高。
"content": Each panel will be only as tall as its content.
默认值为 auto ，因此如果此属性未显式传递给手风琴，则所有面板的高度确实相同，如你所描述的那样你似乎想要的行为可以通过显式传递 heightStyle：'content'来实现。
The default value is auto, so if this property is not explicitly passed to the accordion, the height of all panels would indeed be the same, as you describe. The behavior you seem to be after can be achieved by explicitly passing heightStyle: 'content'.
例如，
$('#accordion').accordion({
collapsible: true,
active: 1,
heightStyle: 'content',
beforeActivate: function() {/*...*/}
});
这篇关于定制手风琴内容divs共享相同的大小，不明白为什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
