0

我正在使用 jquery 1.9.1。在我的手风琴中，高度是根据 heightStyle 值分配的（即“填充”的“内容”）。

在其中一个窗格中，我使用 for 循环来呈现列表。无论我设置什么属性，这个窗格总是溢出。

这是我的 JSP：

<style>
      #accordion-resizer {
          padding: 10px;
          width: 350px;
          height: 220px;
      }
</style>
<script>
      $(function() {
          $( "#accordion" ).accordion({
              heightStyle: "fill",
              autoHeight: false
          });
      });
      $(function() {
          $( "#accordion-resizer" ).resizable({
              minHeight: 140,
              minWidth: 200,
              resize: function() {
                   $( "#accordion" ).accordion( "refresh" );
              }
          });
      });
</script>
</head>
<body>
    <div id="accordion-resizer" class="ui-widget-content">
        <div id="accordion" style="font-size: medium;">
            <h3>Projects</h3>
            <div>
                <p>
                <form:form method="post" modelAttribute="projects" >
                    <c:forEach items="${projects}" var="project" varStatus="status">
                        <tr>
                            <td align="center">${status.count}</td>
                            <td><input name="projects[${status.index}].projectId"
                                value="${project.projectId}" /><br /></td>
                        </tr>
                    </c:forEach>

                    <button type="submit"></button>
                </form:form>
                </p>
            </div>
            <h3>Excepteur sint occaecat</h3>
            <div>
                <p>Lorem Ipsum</p>
                <p>tempora incidunt ut labore</p>
            </div>
            <h3>Other Info</h3>
            <div>
                <p>Neque porro quisquam </p>
                <p>Sed eleifend nonummy </p>
            </div>
        </div>
    </div>

第一个窗格在加载后会展开表单，因此会溢出。其他具有正常高度的其他窗格也采用此新高度。我努力了：

heightStyle：“填充”和 heightStyle：“内容”

两者都无法阻止第一个窗格爆裂。

4

1 回答 1

0

经过大量尝试，我终于找到了解决方案。这是因为手风琴窗格的长度可变。此设置可防止窗格溢出，添加漂亮的滚动条

  #accordion .ui-accordion-content {
    max-height: 500px;
    overflow-y: auto;
}

谢谢

于 2013-10-21T21:07:01.850 回答