Jquery手风琴分为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个在左侧对齐，保持在右侧。

（组件和SCM应位于同一行）

这可能吗？或者我是否必须分别添加两个div并为两者设置accordion？

Answer 1

你不必为此添加2个Accordions，也许试试这个：

<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/