Question

我正在使用jquery 1.9.1。在我的手风琴中，根据heightStyle值（即'fill'的'content'）指定高度。

在其中一个窗格中，我使用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：“content”

两者都无法阻止第一个窗格吹灭。

Answer 1

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

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

谢谢

Jquery手风琴高度溢出

1 个答案: