Question

我正在建立一个网站并发现这个自定义手风琴用jQuery构建（基本上，我希望同时打开多个容器），现在我发现无论其内容如何，所有容器都共享大小相同（所以如果我在顶部容器中有内容，那么所有3个都有很高的高度）。我缺少什么，以及如何让每个容器扩展到它的内容？谢谢你的帮助

由于小提琴因为本地jQuery-UI文件而无法正确显示，因此我已将整个内容here上传。

＆＃13;

$('#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");
})

＆＃13;

#cardbox,
#previewbox {
  border: 1px solid black;
  display: inline-block;
}
#cardbox {
  width: 80%;
}
#previewbox {
  width: 20%;
}

＆＃13;

<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>
        &nbsp;&nbsp;&nbsp;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>

＆＃13;

Answer 1

面板的高度由手风琴的heightStyle属性控制，该属性有三个可能的值：

“auto”：所有面板都将设置为最高面板的高度。

“fill”：根据手风琴的父高度扩展到可用的高度。

“内容”：每个小组的内容都与其内容一样高。

默认值为auto，因此如果未将此属性显式传递给手风琴，则所有面板的高度确实与您所描述的相同。您似乎可以通过明确传递heightStyle: 'content'来实现您的行为。

例如，

$('#accordion').accordion({
     collapsible: true,
     active: 1,
     heightStyle: 'content',
     beforeActivate: function() {/*...*/}
});

Answer 2

可能存在一些样式表问题，下面的摘录视图中的所有内容都很好看。但您可以尝试在卡片盒上设置填充并预览为0.并将其边距设置为自动。

也可能想尝试在div设置为中间或顶部的那些周围进行垂直对齐。

一个根本的解决方案是用td元素或跨度替换你的两个div元素。除非你摆弄他们的风格，否则当他们并排放置时，他们行为不端。

定制手风琴内容divs共享相同的大小，不明白为什么

2 个答案: