jquery - Jquery Accordian 分为 2 列

Question

我在我的 JSP 中使用了 JQuery 手风琴

<div id="accordion" class="subForms">
    <h3><fmt:message key="dimApplicationForm.component"/></h3>
      <div></div>
      <h3><fmt:message key="dimApplicationForm.sharedComponents"/></h3>
      <div></div>
       <h3><fmt:message key="dimApplicationForm.testSystem"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.incidents"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.scm"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.people"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.skills"/></h3>
       <div></div>
</div>

JS代码是

var icons = {
                  header: "ui-icon-circle-arrow-e",
                  activeHeader: "ui-icon-circle-arrow-s"
                };
                $( "#accordion" ).accordion({
                    icons: icons
                });

它得到这样的输出

我希望它在两列中对齐。即前 4 个在左侧对齐，其余在右侧。

（组件和单片机应该在同一行）

这可能吗？还是我必须分别添加两个 div 并为两者设置手风琴？

Answer 1

您不必为此添加 2 个手风琴，也许试试这个：

<div id="accordion" class="subForms">
    <div class="leftCol">
    <h3><fmt:message key="dimApplicationForm.component"/></h3>
      <div></div>
      <h3><fmt:message key="dimApplicationForm.sharedComponents"/></h3>
      <div></div>
       <h3><fmt:message key="dimApplicationForm.testSystem"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.incidents"/></h3>
       <div></div>
    </div>
    <div class="rightCol">
       <h3><fmt:message key="dimApplicationForm.scm"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.people"/></h3>
       <div></div>
       <h3><fmt:message key="dimApplicationForm.skills"/></h3>
       <div></div>
    </div>
</div>

var icons = {
                  header: "ui-icon-circle-arrow-e",
                  activeHeader: "ui-icon-circle-arrow-s"
                };
                $( "#accordion" ).accordion({
                    icons: icons,
                    header: "h3"
                });

http://jsfiddle.net/4Lw34/3/