JQuery Accordion：打开的 div 切入以满足内容（给出参考图像）

Question

我会马上开始。这是我在标题中讨论的内容的图片：JQuery Accordion Bug。请注意 div 的轮廓如何切入右侧以符合我所选内容的内容。出于保密原因，我在 Paint 中屏蔽了 div 的内容，但您明白了。当我已经打开了另一项并尝试打开另一项时，就会发生这种情况。如果所有项目都关闭，并且我单击打开一个项目，它看起来不错（实际上，如果您仔细观察，它会切入然后快速正确地重新调整）。仅当一项已打开并且我单击另一项时才会发生此故障。下面是我用来设置手风琴的代码：

$('#demo_accordion').accordion({
    header: "h3",
    active: false,
    autoHeight: false,
    collapsible: true
});

请注意，collapsible 设置为 true，因此我一次只允许打开一个项目。现在，这是我正在使用的 html（以缩写形式）：

<div id="demo_accordion">
    <% foreach (var entry in Entries) %>
    <% { %>
            <div>
                <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3>
                <table>
                    <!-- table code here -->
                </table>
            </div>
    <% } %>
</div>

我也在 <% 和 %> 中使用内联 .NET C#。不知道这是否与 CSS 相关或什么，但我很确定我完全按照在线演示进行操作。

任何帮助将不胜感激。谢谢。

Answer 1

如果您查看 docs，它会为您提供手风琴的 html 格式。您想要的是更像这样的东西，其中表格位于块元素中，例如 div 并且该 div 位于标题之后。在每个手风琴部分周围都有一个封装 div 是不必要的。

格式应该是：

<div id="demo_accordion">
   <% foreach (var entry in Entries) %>
   <% { %>
      <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3>
      <div> 
         <table>
            <!-- table code here -->
         </table>
      </div>
   <% } %>
</div>

应该解决您的问题。