0

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
                });

このように出力されます ここに画像の説明を入力

これを2列に並べたい。それは最初に左側に配置され、右側に残ります。

(コンポーネントと SCM は同じ行にある必要があります)

これは可能ですか？それとも、2 つの div を別々に追加し、両方にアコーディオンを設定する必要がありますか?

4

1 に答える 1

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/

于 2013-06-26T08:31:54.047 に答える